web: simplify settings dialog markup

apps/web/src/dialogs/settings/index.tsx

@@ -185,22 +185,26 @@ export default function SettingsDialog(props: SettingsDialogProps) {
       <Flex
         sx={{
           height: "80vw",
-          overflow: "hidden"
-        }}
-      >
-        <FlexScrollContainer>
-          <Flex
-            sx={{
-              flexDirection: "column",
-              width: 240,
           overflow: "hidden",
-              minHeight: "min-content",
+          "& #settings-side-menu": {
-              bg: "bgSecondary",
             "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
               {
-                  bg: "bgTransparent",
+                backgroundColor: "bgTransparent",
                 backdropFilter: "blur(8px)"
               }
+          }
+        }}
+      >
+        <FlexScrollContainer
+          id="settings-side-menu"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: "10px",
+            width: 240,
+            overflow: "auto",
+            minHeight: "min-content",
+            backgroundColor: "bgSecondary"
           }}
           data-test-id="settings-navigation-menu"
         >
@@ -274,23 +278,22 @@ export default function SettingsDialog(props: SettingsDialogProps) {
               )}
             </Flex>
           ))}
-          </Flex>
         </FlexScrollContainer>
         <FlexScrollContainer
-          style={{ flex: 1, backgroundColor: "var(--background)" }}
+          style={{
-        >
+            display: "flex",
-          <Flex
+            backgroundColor: "var(--background)",
-            sx={{
+            flex: 1,
             flexDirection: "column",
-              p: 4,
+            padding: 20,
-              gap: 4,
+            gap: 20,
-              overflow: "hidden"
+            minHeight: "min-content",
+            overflow: "auto"
           }}
         >
           {activeSettings.map((group) => (
             <SettingsGroupComponent key={group.key} item={group} />
           ))}
-          </Flex>
         </FlexScrollContainer>
       </Flex>
     </Dialog>
@@ -307,7 +310,14 @@ function SettingsGroupComponent(props: { item: SettingsGroup }) {
 
   if (item.isHidden && item.isHidden()) return null;
   return (
-    <Flex sx={{ flexDirection: "column", gap: 2, overflow: "hidden" }}>
+    <Flex
+      sx={{
+        flexDirection: "column",
+        flexShrink: 0,
+        gap: 2,
+        overflow: "hidden"
+      }}
+    >
       {typeof item.header === "string" ? (
         <Text
           variant="subBody"