From bf47d40fdfbad5bfef6cba6f8ad891a8601d3104 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Mon, 5 Aug 2024 20:23:11 -0700
Subject: [PATCH] Settings: improve padding

---
 src/apps/draw/create/ProviderConfigure.tsx | 2 +-
 src/apps/settings-modal/SettingsModal.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/apps/draw/create/ProviderConfigure.tsx b/src/apps/draw/create/ProviderConfigure.tsx
index 6e77cc95e..509e070fc 100644
--- a/src/apps/draw/create/ProviderConfigure.tsx
+++ b/src/apps/draw/create/ProviderConfigure.tsx
@@ -58,7 +58,7 @@ export function ProviderConfigure(props: {
       <ExpanderControlledBox expanded={open}>
         {!!ProviderConfig && (
           <Card variant='outlined' sx={{ mb: 1, borderTopColor: 'primary.softActiveBg' }}>
-            <CardContent sx={{ gap: 1 }}>
+            <CardContent sx={{ gap: 1.5 /* keep in sync with SettingsModal > AccordionDetails > Box */ }}>
               <ProviderConfig />
             </CardContent>
           </Card>
diff --git a/src/apps/settings-modal/SettingsModal.tsx b/src/apps/settings-modal/SettingsModal.tsx
index 398a528a3..df50d1075 100644
--- a/src/apps/settings-modal/SettingsModal.tsx
+++ b/src/apps/settings-modal/SettingsModal.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Accordion, AccordionDetails, accordionDetailsClasses, AccordionGroup, AccordionSummary, accordionSummaryClasses, Avatar, Button, Divider, ListItemContent, Stack, styled, Tab, tabClasses, TabList, TabPanel, Tabs } from '@mui/joy';
+import { Accordion, AccordionDetails, accordionDetailsClasses, AccordionGroup, AccordionSummary, accordionSummaryClasses, Avatar, Box, Button, Divider, ListItemContent, styled, Tab, tabClasses, TabList, TabPanel, Tabs } from '@mui/joy';
 import AddIcon from '@mui/icons-material/Add';
 import ScienceIcon from '@mui/icons-material/Science';
 import SearchIcon from '@mui/icons-material/Search';
@@ -90,9 +90,9 @@ function Topic(props: { title?: React.ReactNode, icon?: string | React.ReactNode
       )}
 
       <AccordionDetails>
-        <Stack sx={{ gap: 'calc(var(--Card-padding) / 2)', border: 'none' }}>
+        <Box sx={{ display: 'grid', gap: 1.5 /* keep in sync with ProviderConfigure > ExpanderControlledBox > Card > CardContent (Draw App) */ }}>
           {props.children}
-        </Stack>
+        </Box>
       </AccordionDetails>
 
     </Accordion>