From 56f6a45715ee674330cb9f961fe24819ac4072a6 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Thu, 31 Jul 2025 18:24:12 +0100
Subject: [PATCH] Changed style of dropdowns so remain on screen

---
 .../src/components/tools/convert/ConvertSettings.tsx   |  4 ++--
 .../components/tools/convert/GroupedFormatDropdown.tsx | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 6ed20bb93..1f020226f 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -176,7 +176,7 @@ const ConvertSettings = ({
           options={enhancedFromOptions}
           onChange={handleFromExtensionChange}
           disabled={disabled}
-          minWidth="21.875rem"
+          minWidth="18rem"
         />
       </Stack>
 
@@ -214,7 +214,7 @@ const ConvertSettings = ({
             options={enhancedToOptions}
             onChange={handleToExtensionChange}
             disabled={disabled}
-            minWidth="21.875rem"
+            minWidth="18rem"
           />
         )}
       </Stack>
diff --git a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
index f7e1c45ae..6ef1c25a3 100644
--- a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
@@ -106,7 +106,10 @@ const GroupedFormatDropdown = ({
       </Popover.Target>
       <Popover.Dropdown 
         style={{ 
-          minWidth,
+          minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
+          maxWidth: '90vw',
+          maxHeight: '40vh',
+          overflow: 'auto',
           backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
           border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
         }}
@@ -122,7 +125,7 @@ const GroupedFormatDropdown = ({
               >
                 {groupName}
               </Text>
-              <Group gap="xs">
+              <Group gap="xs" style={{ flexWrap: 'wrap' }}>
                 {groupOptions.map((option) => (
                   <Button
                     key={option.value}
@@ -134,7 +137,8 @@ const GroupedFormatDropdown = ({
                     style={{
                       fontSize: '0.75rem',
                       height: '2rem',
-                      padding: '0 0.75rem'
+                      padding: '0 0.75rem',
+                      flexShrink: 0
                     }}
                   >
                     {option.label}