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>
</InformationalPopover>
<Tooltip label={tooltipLabel}>
<Box w="full">
<Box w="full" minW={0}>
<Combobox
value={value}
placeholder={placeholder}

22
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 { 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>
);
};

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

@ -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 />

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 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>