fix(ui): model select overflowing when model names are too long

invoke-ai · Jul 23, 2024 · db664af · db664af
1 parent b99a53e
commit db664af
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -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/...eai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/...eai/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/...tures/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/...tures/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/...tures/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx b/...tures/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>