From db664afc499781ac2eb11fc36c1d868b03363c00 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jul 2024 08:29:31 +1000
Subject: [PATCH] fix(ui): model select overflowing when model  names are too
 long

---
 .../MainModel/ParamMainModelSelect.tsx        |  2 +-
 .../ParamSDXLRefinerModelSelect.tsx           | 22 ++++++++++---------
 .../RefinerSettingsAccordion.tsx              |  2 +-
 .../UpscaleSettingsAccordion.tsx              |  2 +-
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
index 26bf80af7bb..c9410dd7a45 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -51,7 +51,7 @@ const ParamMainModelSelect = () => {
         <FormLabel>{t('modelManager.model')}</FormLabel>
       </InformationalPopover>
       <Tooltip label={tooltipLabel}>
-        <Box w="full">
+        <Box w="full" minW={0}>
           <Combobox
             value={value}
             placeholder={placeholder}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
index 619f55f5f8c..e18ccbfbb27 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Box, Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
@@ -37,18 +37,20 @@ const ParamSDXLRefinerModelSelect = () => {
     optionsFilter,
   });
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} w="full">
       <InformationalPopover feature="refinerModel">
         <FormLabel>{t('sdxl.refinermodel')}</FormLabel>
       </InformationalPopover>
-      <Combobox
-        value={value}
-        placeholder={placeholder}
-        options={options}
-        onChange={onChange}
-        noOptionsMessage={noOptionsMessage}
-        isClearable
-      />
+      <Box w="full" minW={0}>
+        <Combobox
+          value={value}
+          placeholder={placeholder}
+          options={options}
+          onChange={onChange}
+          noOptionsMessage={noOptionsMessage}
+          isClearable
+        />
+      </Box>
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
index bf5bdf13e4e..eb73ebe961d 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
@@ -62,7 +62,7 @@ const RefinerSettingsAccordionContent: React.FC = memo(() => {
 
   return (
     <FormControlGroup isDisabled={!isRefinerModelSelected}>
-      <Flex p={4} gap={4} flexDir="column">
+      <Flex p={4} gap={4} flexDir="column" minW={0}>
         <ParamSDXLRefinerModelSelect />
         <FormControlGroup formLabelProps={stepsScaleLabelProps} isDisabled={!isRefinerModelSelected}>
           <ParamSDXLRefinerScheduler />
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
index ef0a9bdd050..7aa8c8c2501 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
@@ -53,7 +53,7 @@ export const UpscaleSettingsAccordion = memo(() => {
         <Flex flexDir="column" gap={4}>
           <Flex gap={4}>
             <UpscaleInitialImage />
-            <Flex direction="column" w="full" alignItems="center" gap={2}>
+            <Flex direction="column" w="full" alignItems="center" gap={2} minW={0}>
               <ParamSpandrelModel />
               <UpscaleScaleSlider />
             </Flex>