1 files changed, 22 insertions, 2 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index ff6fe57..2b35088 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -71,6 +71,8 @@
   --nav-h: 52px;
   --chrome-h: 0px;
   --toolbar-h: 0px;
+  /* Published by the music bar while it is on screen (sticky.js). */
+  --music-bar-h: 0px;
 }
 
 /* ── Reset ────────────────────────────────────────────────────────────────── */
@@ -387,15 +389,33 @@ a:hover { text-decoration: underline; }
 
 /* ── Sidebar ──────────────────────────────────────────────────────────────── */
 
+/* Pinned under the navigation bar at the window's height, so the legal link at
+   its foot is at the bottom of the window whatever the page's length — on a
+   long file list it would otherwise be at the bottom of the page. It stops
+   above the music bar, which is pinned to the bottom of the window too. */
 .sidebar {
+  position: sticky;
+  top: var(--nav-h);
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
   width: 240px;
+  height: calc(100vh - var(--nav-h) - var(--music-bar-h));
   background: var(--sidebar-bg);
   border-right: 1px solid var(--border);
-  padding: 16px 0;
+  padding: 16px 0 0;
   flex-shrink: 0;
   overflow-y: auto;
 }
 
+.sidebar-legal {
+  margin-top: auto;
+  padding: 10px 20px 12px;
+  color: var(--text-dim);
+  font-size: 0.75em;
+}
+.sidebar-legal:hover { color: var(--accent); }
+
 .sidebar-section { padding: 0 12px; margin-bottom: 24px; }
 
 .sidebar-heading {
@@ -2465,7 +2485,7 @@ a.transfer-name {
     position: fixed;
     left: -240px;
     top: 52px;
-    height: calc(100vh - 52px);
+    height: calc(100vh - 52px - var(--music-bar-h));
     z-index: 50;
     transition: left 0.2s;
     box-shadow: none;