From 74ad6dd4c98a88321f1b956f0e0e0445b65693fd Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Tue, 20 Jan 2026 16:53:05 +0000
Subject: [PATCH] update settings tabs layout and spacing

---
 .../app/src/components/dialog-settings.tsx    | 31 +++++++++++++------
 packages/ui/src/components/tabs.css           |  3 +-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/dialog-settings.tsx b/packages/app/src/components/dialog-settings.tsx
index 7f4989a6e..22704767a 100644
--- a/packages/app/src/components/dialog-settings.tsx
+++ b/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>
-          <Tabs.Trigger value="general">
-            <Icon name="settings-gear" />
-            General
-          </Tabs.Trigger>
-          <Tabs.Trigger value="shortcuts">
-            <Icon name="console" />
-            Shortcuts
-          </Tabs.Trigger>
+          <div
+            style={{
+              display: "flex",
+              "flex-direction": "column",
+              gap: "12px",
+              width: "100%",
+              "padding-top": "12px",
+              "padding-bottom": "12px",
+            }}
+          >
+            <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" /> */}
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index a74bcc5d5..b7da456b6 100644
--- a/packages/ui/src/components/tabs.css
+++ b/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);