Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 08:29:31 +10:00
parent b99a53e64e
commit db664afc49
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
View File

@ -51,7 +51,7 @@ const ParamMainModelSelect = () => {
<FormLabel>{t('modelManager.model')}</FormLabel> <FormLabel>{t('modelManager.model')}</FormLabel>
</InformationalPopover> </InformationalPopover>
<Tooltip label={tooltipLabel}> <Tooltip label={tooltipLabel}>
<Box w="full"> <Box w="full" minW={0}>
<Combobox <Combobox
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}

6
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
View File

@ -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 { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
@ -37,10 +37,11 @@ const ParamSDXLRefinerModelSelect = () => {
optionsFilter, optionsFilter,
}); });
return ( return (
<FormControl isDisabled={!options.length} isInvalid={!options.length}> <FormControl isDisabled={!options.length} isInvalid={!options.length} w="full">
<InformationalPopover feature="refinerModel"> <InformationalPopover feature="refinerModel">
<FormLabel>{t('sdxl.refinermodel')}</FormLabel> <FormLabel>{t('sdxl.refinermodel')}</FormLabel>
</InformationalPopover> </InformationalPopover>
<Box w="full" minW={0}>
<Combobox <Combobox
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
@ -49,6 +50,7 @@ const ParamSDXLRefinerModelSelect = () => {
noOptionsMessage={noOptionsMessage} noOptionsMessage={noOptionsMessage}
isClearable isClearable
/> />
</Box>
</FormControl> </FormControl>
); );
}; };

2
invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
View File

@ -62,7 +62,7 @@ const RefinerSettingsAccordionContent: React.FC = memo(() => {
return ( return (
<FormControlGroup isDisabled={!isRefinerModelSelected}> <FormControlGroup isDisabled={!isRefinerModelSelected}>
<Flex p={4} gap={4} flexDir="column"> <Flex p={4} gap={4} flexDir="column" minW={0}>
<ParamSDXLRefinerModelSelect /> <ParamSDXLRefinerModelSelect />
<FormControlGroup formLabelProps={stepsScaleLabelProps} isDisabled={!isRefinerModelSelected}> <FormControlGroup formLabelProps={stepsScaleLabelProps} isDisabled={!isRefinerModelSelected}>
<ParamSDXLRefinerScheduler /> <ParamSDXLRefinerScheduler />

2
invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion.tsx
View File

@ -53,7 +53,7 @@ export const UpscaleSettingsAccordion = memo(() => {
<Flex flexDir="column" gap={4}> <Flex flexDir="column" gap={4}>
<Flex gap={4}> <Flex gap={4}>
<UpscaleInitialImage /> <UpscaleInitialImage />
<Flex direction="column" w="full" alignItems="center" gap={2}> <Flex direction="column" w="full" alignItems="center" gap={2} minW={0}>
<ParamSpandrelModel /> <ParamSpandrelModel />
<UpscaleScaleSlider /> <UpscaleScaleSlider />
</Flex> </Flex>