From 55dfabb892d301de14b38abee31bac0351153bd0 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 30 Dec 2023 09:21:36 +1100 Subject: [PATCH] feat(ui): use make label widths grow Fixes issue where translations overflowed due to hardcoded widths. --- .../parameters/components/ImageSize/AspectRatioSelect.tsx | 2 +- .../AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx | 2 +- .../CompositingSettingsAccordion.tsx | 2 +- .../GenerationSettingsAccordion.tsx | 2 +- .../ImageSettingsAccordion/ImageSettingsAccordion.tsx | 4 ++-- .../RefinerSettingsAccordion/RefinerSettingsAccordion.tsx | 4 ++-- .../frontend/web/src/features/ui/components/InvokeTabs.tsx | 3 ++- 7 files changed, 10 insertions(+), 9 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx index e4559782f3..75129d5d33 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx @@ -53,4 +53,4 @@ export const AspectRatioSelect = memo(() => { AspectRatioSelect.displayName = 'AspectRatioSelect'; -const selectStyles: SystemStyleObject = { minW: 48 }; +const selectStyles: SystemStyleObject = { minW: 24 }; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index 91b581174a..5544c256dd 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -12,7 +12,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; const labelProps: InvLabelProps = { - w: '9.2rem', + minW: '9.2rem', }; const labelProps2: InvLabelProps = { diff --git a/invokeai/frontend/web/src/features/settingsAccordions/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx index f819e7a1fc..0cf59716b5 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx @@ -20,7 +20,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; const coherenceLabelProps: FormLabelProps = { - w: '4.5rem', + minW: '4.5rem', }; export const CompositingSettingsAccordion = memo(() => { diff --git a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx index 2abfd99c58..6993b67071 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx @@ -25,7 +25,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; const labelProps: InvLabelProps = { - w: '4rem', + minW: '4rem', }; const badgesSelector = createMemoizedSelector( diff --git a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx index 8727559e92..32e1a040db 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx @@ -43,11 +43,11 @@ const selector = createMemoizedSelector( ); const labelProps: InvLabelProps = { - w: 12, + minW: 12, }; const scalingLabelProps: InvLabelProps = { - w: '4.5rem', + minW: '4.5rem', }; export const ImageSettingsAccordion = memo(() => { diff --git a/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx index ab3b68c616..3ae135d174 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx @@ -19,11 +19,11 @@ import { useTranslation } from 'react-i18next'; import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable'; const aestheticLabelProps: InvLabelProps = { - w: '9.2rem', + minW: '9.2rem', }; const stepsScaleLabelProps: InvLabelProps = { - w: '5rem', + minW: '5rem', }; const selector = createMemoizedSelector(stateSelector, (state) => { diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index bc5bf5f716..3662004af0 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -99,6 +99,7 @@ export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager', 'queue']; export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue']; const panelStyles: CSSProperties = { height: '100%', width: '100%' }; const GALLERY_MIN_SIZE_PCT = 20; +const OPTIONS_PANEL_WIDTH = '434px'; const InvokeTabs = () => { const activeTabIndex = useAppSelector(activeTabIndexSelector); @@ -191,7 +192,7 @@ const InvokeTabs = () => { {!NO_SIDE_PANEL_TABS.includes(activeTabName) && ( - + {activeTabName === 'nodes' ? ( ) : (