From ae6db67068fb9c6ea22d16498b4e71d4c553c357 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 17 Aug 2023 21:38:12 +1000
Subject: [PATCH] feat(ui): add width to mantine selects

---
 .../components/fields/fieldTypes/LoRAModelInputField.tsx     | 5 +++++
 .../components/fields/fieldTypes/MainModelInputField.tsx     | 5 +++++
 .../components/fields/fieldTypes/RefinerModelInputField.tsx  | 5 +++++
 .../components/fields/fieldTypes/SDXLMainModelInputField.tsx | 5 +++++
 .../components/fields/fieldTypes/SchedulerInputField.tsx     | 5 +++++
 .../components/fields/fieldTypes/VaeModelInputField.tsx      | 5 +++++
 6 files changed, 30 insertions(+)

diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/LoRAModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/LoRAModelInputField.tsx
index f911bf8746..8e4d04a55d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/LoRAModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/LoRAModelInputField.tsx
@@ -102,6 +102,11 @@ const LoRAModelInputFieldComponent = (
         item.value.toLowerCase().includes(value.toLowerCase().trim())
       }
       onChange={handleChange}
+      sx={{
+        '.mantine-Select-dropdown': {
+          width: '16rem !important',
+        },
+      }}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/MainModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/MainModelInputField.tsx
index 3847e14ae2..f5d2393532 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/MainModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/MainModelInputField.tsx
@@ -133,6 +133,11 @@ const MainModelInputFieldComponent = (
           error={!selectedModel}
           disabled={data.length === 0}
           onChange={handleChangeModel}
+          sx={{
+            '.mantine-Select-dropdown': {
+              width: '16rem !important',
+            },
+          }}
         />
       )}
       {isSyncModelEnabled && <SyncModelsButton className="nodrag" iconMode />}
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/RefinerModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/RefinerModelInputField.tsx
index 5ba3ad529d..d42334c7b2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/RefinerModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/RefinerModelInputField.tsx
@@ -104,6 +104,11 @@ const RefinerModelInputFieldComponent = (
         error={data.length === 0}
         disabled={data.length === 0}
         onChange={handleChangeModel}
+        sx={{
+          '.mantine-Select-dropdown': {
+            width: '16rem !important',
+          },
+        }}
       />
       {isSyncModelEnabled && (
         <Box mt={7}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SDXLMainModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SDXLMainModelInputField.tsx
index 1240cb95a0..2193835228 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SDXLMainModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SDXLMainModelInputField.tsx
@@ -131,6 +131,11 @@ const ModelInputFieldComponent = (
         error={data.length === 0}
         disabled={data.length === 0}
         onChange={handleChangeModel}
+        sx={{
+          '.mantine-Select-dropdown': {
+            width: '16rem !important',
+          },
+        }}
       />
       {isSyncModelEnabled && <SyncModelsButton className="nodrag" iconMode />}
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SchedulerInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SchedulerInputField.tsx
index 93a7d7e131..87f2f5b5e4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SchedulerInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/SchedulerInputField.tsx
@@ -65,6 +65,11 @@ const SchedulerInputField = (
   return (
     <IAIMantineSearchableSelect
       className="nowheel nodrag"
+      sx={{
+        '.mantine-Select-dropdown': {
+          width: '14rem !important',
+        },
+      }}
       value={field.value}
       data={data}
       onChange={handleChange}
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/VaeModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/VaeModelInputField.tsx
index 9a9b15b621..4532369233 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/VaeModelInputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/VaeModelInputField.tsx
@@ -98,6 +98,11 @@ const VaeModelInputFieldComponent = (
       onChange={handleChangeModel}
       disabled={data.length === 0}
       clearable
+      sx={{
+        '.mantine-Select-dropdown': {
+          width: '16rem !important',
+        },
+      }}
     />
   );
 };