From 88cb62df88957514917648a5819a9874d4e8348e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 19 Oct 2025 21:16:16 -0400
Subject: [PATCH] Adjust sidebar dropup spacing and scrollbar styling

---
 css/tailwind.source.css |  8 ++++++--
 css/tokens.css          | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index a4d884d6..084cbbd4 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -2649,7 +2649,9 @@
     display: flex;
     align-items: center;
     gap: var(--space-sidebar-footer-gap);
-    padding: var(--space-sidebar-nav-padding-block) var(--space-md);
+    padding-block: var(--space-sidebar-nav-padding-block);
+    padding-inline-start: var(--space-sidebar-nav-padding-inline-start);
+    padding-inline-end: var(--space-sidebar-nav-padding-inline-end);
     min-height: var(--sidebar-control-size);
     border-radius: var(--radius-sidebar-nav);
     font-size: var(--font-size-sidebar-nav);
@@ -2762,7 +2764,9 @@
     justify-content: space-between;
     gap: var(--space-sidebar-footer-gap);
     width: 100%;
-    padding: var(--space-sidebar-trigger-padding-block) var(--space-md);
+    padding-block: var(--space-sidebar-trigger-padding-block);
+    padding-inline-start: var(--space-sidebar-nav-padding-inline-start);
+    padding-inline-end: var(--space-sidebar-nav-padding-inline-end);
     min-height: var(--sidebar-control-size);
     border-radius: var(--radius-sidebar-nav);
     border: var(--border-width-hairline) solid transparent;
diff --git a/css/tokens.css b/css/tokens.css
index 629e52da..562204d2 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -188,6 +188,8 @@
   );
   --sidebar-dropup-max-height: calc(3rem * 6);
   --space-sidebar-nav-padding-block: 0.7rem;
+  --space-sidebar-nav-padding-inline-start: var(--space-sm);
+  --space-sidebar-nav-padding-inline-end: var(--space-md-plus);
   --space-sidebar-subnav-padding-block: 0.55rem;
   --space-sidebar-nav-translate: 0.35rem;
   --grid-card-min-width: 20rem;
@@ -464,6 +466,22 @@
   --color-overlay-banner-transparent: rgb(255 255 255 / 0);
   --color-overlay-backdrop: rgb(15 23 42 / 0.2);
 
+  --scrollbar-track: color-mix(
+    in srgb,
+    var(--color-sidebar-border-strong) 28%,
+    transparent
+  );
+  --scrollbar-thumb: color-mix(
+    in srgb,
+    var(--color-accent) 48%,
+    transparent
+  );
+  --scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--color-accent-strong) 56%,
+    transparent
+  );
+
   --color-sidebar-surface: rgb(255 255 255 / 0.9);
   --color-sidebar-surface-alt: rgb(236 240 247 / 0.72);
   --color-sidebar-border: rgb(184 194 212 / 0.28);
@@ -616,6 +634,22 @@
   --color-overlay-banner-transparent: rgb(0 0 0 / 0);
   --color-overlay-backdrop: rgb(5 8 14 / 0.75);
 
+  --scrollbar-track: color-mix(
+    in srgb,
+    var(--color-sidebar-surface-alt) 42%,
+    transparent
+  );
+  --scrollbar-thumb: color-mix(
+    in srgb,
+    var(--color-accent) 52%,
+    transparent
+  );
+  --scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--color-accent-strong) 62%,
+    transparent
+  );
+
   --color-sidebar-surface: rgb(12 18 30 / 0.94);
   --color-sidebar-surface-alt: rgb(10 18 32 / 0.8);
   --color-sidebar-border: rgb(86 106 142 / 0.26);