From 0defce9883de7179118526cd17fcdeeadd414597 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Wed, 23 Jul 2025 14:52:54 +0100
Subject: [PATCH] Rem instead of px Close on escape and click externally

---
 .../tools/convert/ConvertSettings.tsx         | 10 +++++-----
 .../tools/convert/GroupedFormatDropdown.tsx   | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 7cc0d3e0b..d3e825893 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -64,7 +64,7 @@ const ConvertSettings = ({
           options={FROM_FORMAT_OPTIONS}
           onChange={handleFromExtensionChange}
           disabled={disabled}
-          minWidth="350px"
+          minWidth="21.875rem"
         />
       </Stack>
 
@@ -75,8 +75,8 @@ const ConvertSettings = ({
         {!parameters.fromExtension ? (
           <UnstyledButton
             style={{
-              padding: '8px 12px',
-              border: `1px solid ${theme.colors.gray[4]}`,
+              padding: '0.5rem 0.75rem',
+              border: `0.0625rem solid ${theme.colors.gray[4]}`,
               borderRadius: theme.radius.sm,
               backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
               color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
@@ -87,7 +87,7 @@ const ConvertSettings = ({
               <Text size="sm">Select a source format first</Text>
               <KeyboardArrowDownIcon 
                 style={{ 
-                  fontSize: 16,
+                  fontSize: '1rem',
                   color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
                 }} 
               />
@@ -100,7 +100,7 @@ const ConvertSettings = ({
             options={getAvailableToExtensions(parameters.fromExtension) || []}
             onChange={handleToExtensionChange}
             disabled={disabled}
-            minWidth="350px"
+            minWidth="21.875rem"
           />
         )}
       </Stack>
diff --git a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
index 3fc4563d3..207759f8a 100644
--- a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
@@ -23,7 +23,7 @@ const GroupedFormatDropdown = ({
   options,
   onChange,
   disabled = false,
-  minWidth = "300px"
+  minWidth = "18.75rem"
 }: GroupedFormatDropdownProps) => {
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const theme = useMantineTheme();
@@ -58,19 +58,21 @@ const GroupedFormatDropdown = ({
   return (
     <Popover
       opened={dropdownOpened}
-      onClose={() => setDropdownOpened(false)}
+      onDismiss={() => setDropdownOpened(false)}
       position="bottom-start"
       withArrow
       shadow="sm"
       disabled={disabled}
+      closeOnEscape={true}
+      trapFocus
     >
       <Popover.Target>
         <UnstyledButton
           onClick={() => setDropdownOpened(!dropdownOpened)}
           disabled={disabled}
           style={{
-            padding: '8px 12px',
-            border: `1px solid ${theme.colors.gray[4]}`,
+            padding: '0.5rem 0.75rem',
+            border: `0.0625rem solid ${theme.colors.gray[4]}`,
             borderRadius: theme.radius.sm,
             backgroundColor: disabled 
               ? theme.colors.gray[1] 
@@ -88,7 +90,7 @@ const GroupedFormatDropdown = ({
             </Text>
             <KeyboardArrowDownIcon 
               style={{ 
-                fontSize: 16,
+                fontSize: '1rem',
                 transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
                 transition: 'transform 0.2s ease',
                 color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
@@ -101,7 +103,7 @@ const GroupedFormatDropdown = ({
         style={{ 
           minWidth,
           backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-          border: `1px solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+          border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
         }}
       >
         <Stack gap="md">
@@ -123,9 +125,9 @@ const GroupedFormatDropdown = ({
                     size="sm"
                     onClick={() => handleOptionSelect(option.value)}
                     style={{
-                      fontSize: '12px',
-                      height: '32px',
-                      padding: '0 12px'
+                      fontSize: '0.75rem',
+                      height: '2rem',
+                      padding: '0 0.75rem'
                     }}
                   >
                     {option.label}