Dock peers footer to bottom so nav never scrolls with peers

Stop whole-sidebar scrolling; only the nav region scrolls. Peers live in a fixed sidebar footer that grows up to four rows then scrolls on its own.

ui/modern.css

@@ -187,12 +187,19 @@ body {
 
 /* ─── Sidebar ─── */
 #sidebar {
+  position: fixed;
   top: var(--titlebar-h);
+  left: 0;
   height: calc(100vh - var(--titlebar-h));
   width: var(--sidebar-w);
   background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
   border-right: 1px solid var(--border-color);
   box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  /* Never scroll the whole sidebar — nav and peer list scroll independently */
+  overflow: hidden;
+  z-index: 1000;
 }
 
 #sidebar.collapsed {
@@ -209,10 +216,15 @@ body {
   display: none !important;
 }
 
-#sidebar.collapsed .connections-panel {
+#sidebar.collapsed .connections-panel,
+#sidebar.collapsed .sidebar-footer {
   overflow: hidden;
 }
 
+#sidebar.collapsed .sidebar-footer .sidebar-divider {
+  display: none;
+}
+
 #sidebar.collapsed .open-add-connection-btn {
   width: 100%;
   justify-content: center;
@@ -273,21 +285,24 @@ body {
 }
 
 #sidebar .content {
-  padding: 16px 14px 12px;
+  flex: 1 1 auto;
+  padding: 16px 14px 10px;
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  max-height: 100%;
   overflow: hidden;
 }
 
-/* Nav fills space above the sticky peers panel */
+/* Only the nav region scrolls — peers stay docked at the bottom */
 .sidebar-nav-scroll {
   flex: 1 1 auto;
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
   padding-right: 2px;
+  padding-bottom: 8px;
   scrollbar-gutter: stable;
 }
 
@@ -335,15 +350,24 @@ body {
   border: none;
   height: 1px;
   background: var(--border-color);
-  margin: 12px 4px;
+  margin: 8px 4px 10px;
   opacity: 1;
   flex: 0 0 auto;
 }
 
 /*
- * Peers panel — sticky to the bottom of the sidebar.
- * List grows upward with each peer until 4 rows, then scrolls.
+ * Footer docked to the bottom of the sidebar (not in the nav scroll).
+ * Peer list grows upward until 4 rows, then scrolls inside the footer.
  */
+.sidebar-footer {
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding-top: 4px;
+  background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 28%);
+  border-top: 0;
+  z-index: 2;
+}
+
 .connections-panel {
   --peer-row-h: 54px;
   --peer-row-gap: 8px;
@@ -356,11 +380,11 @@ body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  margin-top: auto; /* pin to bottom when nav is short */
-  padding-top: 2px;
-  padding-bottom: 2px;
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 4px;
   overflow: hidden;
-  background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 12%);
+  max-height: none;
 }
 
 .connections-panel-header {

ui/styles.css

@@ -169,14 +169,45 @@
       border-right: 1px solid var(--border-color);
       height: calc(100vh - 35px);
       width: 280px;
-      overflow-y: auto;
-      overflow-x: hidden;
+      /* Nav scrolls inside .sidebar-nav-scroll; peers stay bottom-docked */
+      overflow: hidden;
       transition: width var(--transition-base), box-shadow var(--transition-base);
       box-shadow: var(--shadow-lg);
       display: flex;
       flex-direction: column;
     }
 
+    #sidebar .content {
+      flex: 1 1 auto;
+      min-height: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .sidebar-nav-scroll {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .sidebar-footer {
+      flex: 0 0 auto;
+      margin-top: auto;
+    }
+
+    .connections-panel {
+      flex: 0 0 auto;
+      margin-top: 0;
+    }
+
+    #connection-list {
+      max-height: calc((4 * 54px) + (3 * 8px));
+      overflow-y: auto;
+    }
+
     #sidebar.collapsed {
       width: 60px;
     }
@@ -336,10 +367,9 @@
 
     /* Legacy full-screen status spinner removed — activity uses #job-drawer */
 
-    /* Sidebar Content Styling */
+    /* Sidebar Content Styling (layout flex/overflow controlled in modern.css) */
     #sidebar .content {
       padding: var(--spacing-lg);
-      flex: 1;
     }
 
     #sidebar .content h4 {
@@ -1486,22 +1516,7 @@
       gap: 8px;
     }
 
-    .sidebar-nav-scroll {
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow-y: auto;
-    }
 
-    /* Peers stay bottom-pinned; list caps at 4 visible rows */
-    .connections-panel {
-      flex: 0 0 auto;
-      margin-top: auto;
-    }
-
-    #connection-list {
-      max-height: calc((4 * 54px) + (3 * 8px));
-      overflow-y: auto;
-    }
 
     /* Filter and Search Bar Styling */
     #container-search,