update settings tabs layout and spacing

packages/app/src/components/dialog-settings.tsx

@@ -16,15 +16,28 @@ export const DialogSettings: Component = () => {
     <Dialog size="large">
       <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
         <Tabs.List>
-          <Tabs.SectionTitle>Desktop</Tabs.SectionTitle>
+          <div
-          <Tabs.Trigger value="general">
+            style={{
-            <Icon name="settings-gear" />
+              display: "flex",
-            General
+              "flex-direction": "column",
-          </Tabs.Trigger>
+              gap: "12px",
-          <Tabs.Trigger value="shortcuts">
+              width: "100%",
-            <Icon name="console" />
+              "padding-top": "12px",
-            Shortcuts
+              "padding-bottom": "12px",
-          </Tabs.Trigger>
+            }}
+          >
+            <Tabs.SectionTitle>Desktop</Tabs.SectionTitle>
+            <div style={{ display: "flex", "flex-direction": "column", gap: "6px", width: "100%" }}>
+              <Tabs.Trigger value="general">
+                <Icon name="settings-gear" />
+                General
+              </Tabs.Trigger>
+              <Tabs.Trigger value="shortcuts">
+                <Icon name="console" />
+                Shortcuts
+              </Tabs.Trigger>
+            </div>
+          </div>
           {/* <Tabs.SectionTitle>Server</Tabs.SectionTitle> */}
           {/* <Tabs.Trigger value="permissions"> */}
           {/*   <Icon name="checklist" /> */}

packages/ui/src/components/tabs.css

@@ -302,7 +302,8 @@
       }
 
       [data-slot="tabs-section-title"] {
-        padding: 8px 8px 4px 8px;
+        width: 100%;
+        padding: 0;
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-weight: var(--font-weight-medium);