From c52996a1445137f020ab795a93dfe7cc3bbc8696 Mon Sep 17 00:00:00 2001
From: TELVIN TEUM <telvinteum@ubunifucollege.com>
Date: Sat, 18 Jul 2026 11:00:46 +0300
Subject: [PATCH] Polish shell spacing and scrollbar styling

Adjust the AppShell canvas wrapper to keep visible padding on all sides at large breakpoints, so the floating canvas stays visually separated from the sidebar too. Add global themed scrollbar styles (Firefox + WebKit) to align scroll regions with the app palette, including hover states and transparent tracks/corners.
---
 src/components/layout/AppShell.tsx |  4 +++-
 src/index.css                      | 32 ++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index f3be5a6..fee46c1 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -101,7 +101,9 @@ export function AppShell() {
             bell far right. A shrink-0 sibling of the canvas, so the canvas
             gives up exactly its height and stays the only scroll region. */}
         <TopBar onSearch={openSearch} />
-        <div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pl-0 lg:pt-3">
+        {/* Visible gap on every side between the floating canvas and the
+            outer shell (including sidebar-side, so the canvas is narrower). */}
+        <div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pt-3">
           {/* Deliberate 8px exception to the 6px radius rule: the floating
               canvas alone reads better slightly softer at shell scale. */}
           <main className="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-steel/20 bg-canvas">
diff --git a/src/index.css b/src/index.css
index 40ba8cc..9b93939 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,4 +27,36 @@
   ::selection {
     @apply bg-primary/40 text-charcoal;
   }
+
+  /* Themed scrollbars, matching the shell palette in every scroll region
+     (canvas, sidebar nav, popovers). Standard properties for Firefox and
+     modern Chromium; the -webkit rules cover Safari. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.steel / 40%') transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    background-color: theme('colors.steel / 40%');
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: theme('colors.steel / 60%');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }