Stabilize collapsed sidebar rail

css/style.css

@@ -32,6 +32,7 @@
   --sidebar-width-expanded: 16rem;
   --sidebar-width-collapsed: 4rem;
   --sidebar-width: var(--sidebar-width-expanded);
+  --sidebar-control-size: 2.75rem;
 }
 
 html {
@@ -1483,7 +1484,11 @@ footer a:hover {
   height: 100dvh;
   background-color: transparent;
   color: var(--color-text);
-  overflow: visible;
+  overflow-x: visible;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
   transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   /* Keep below modal stacks so dialogs overlay the drawer. */
   z-index: var(--z-sidebar);
@@ -1493,16 +1498,30 @@ footer a:hover {
 #sidebar .sidebar__inner {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
   height: 100%;
   padding: 1.5rem 1.25rem 1.75rem;
   position: relative;
   width: 100%;
-  overflow-x: visible;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable both-edges;
+  /*
+    Allow the gradient panel shadow to breathe outside the rail while a nested
+    scroll container handles overflow.
+  */
+  overflow: visible;
+}
+
+/*
+  The scroll wrapper keeps nav + footer together while leaving overflow
+  visible so the gradient card shadow is never clipped.
+*/
+.sidebar-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: visible;
 }
 
 .sidebar-panel {
@@ -1517,6 +1536,9 @@ footer a:hover {
   padding: 1.25rem 1rem;
   width: 100%;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
 }
 
 .sidebar-panel--primary {
@@ -1534,8 +1556,8 @@ footer a:hover {
   display: none;
   align-items: center;
   justify-content: center;
-  width: 2.75rem;
-  height: 2.75rem;
+  width: var(--sidebar-control-size);
+  height: var(--sidebar-control-size);
   border-radius: 9999px;
   border: 1px solid rgba(148, 163, 184, 0.2);
   background: rgba(148, 163, 184, 0.08);
@@ -1577,6 +1599,7 @@ footer a:hover {
   align-items: center;
   gap: 0.75rem;
   padding: 0.625rem 0.875rem;
+  min-height: var(--sidebar-control-size);
   border-radius: 0.875rem;
   font-size: 0.95rem;
   font-weight: 600;
@@ -1618,6 +1641,7 @@ footer a:hover {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  margin-top: auto;
   position: relative;
   z-index: 2;
 }
@@ -1629,6 +1653,7 @@ footer a:hover {
   gap: 0.75rem;
   width: 100%;
   padding: 0.75rem 0.875rem;
+  min-height: var(--sidebar-control-size);
   border-radius: 0.875rem;
   border: 1px solid rgba(148, 163, 184, 0.18);
   background: rgba(30, 41, 59, 0.85);
@@ -1793,8 +1818,10 @@ body.sidebar-open #sidebarOverlay {
       Keep icons centered in the collapsed rail without resizing them.
     */
     justify-content: center;
-    padding-inline: 0.5rem;
-    min-height: 2.75rem;
+    width: var(--sidebar-control-size);
+    padding: 0;
+    margin-inline: auto;
+    border-radius: 9999px;
   }
 
   body.sidebar-expanded #sidebar .sidebar-nav-link,
@@ -1811,18 +1838,19 @@ body.sidebar-open #sidebarOverlay {
   #sidebar.sidebar-collapsed .sidebar__inner {
     /*
       Keep enough breathing room for the panel shadow while widening the
-      interior track so 2.75rem controls stay perfectly round.
+      interior track so var(--sidebar-control-size) controls stay perfectly
+      round.
     */
-    padding-inline: 0.5rem;
+    padding-inline: 0.25rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-panel,
   #sidebar.sidebar-collapsed .sidebar-panel {
     /*
       Mirror the outer adjustment so the gradient card retains its rounded
-      edges without squeezing the icon rail.
+      edges without squeezing the icon rail or clipping the control diameter.
     */
-    padding-inline: 0.75rem;
+    padding-inline: 0.375rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-panel__header,
@@ -1850,9 +1878,10 @@ body.sidebar-open #sidebarOverlay {
       padding consistent so the glyph does not scale between states.
     */
     justify-content: center;
-    width: 2.75rem;
-    height: 2.75rem;
+    width: var(--sidebar-control-size);
+    height: var(--sidebar-control-size);
     padding: 0;
+    margin-inline: auto;
     border-radius: 9999px;
   }