Fix sidebar height; scroll the button list when it overflows

README.md

@@ -3,7 +3,9 @@
 A single Python app that is both the frontend and the backend for a dashboard of
 internal services. The sidebar has one button per service; clicking it loads the
 service in an iframe **through the dashboard's built-in reverse proxy**, so the
-upstream services never need to be public.
+upstream services never need to be public. The sidebar is one viewport tall -
+once the buttons overflow it, its own list scrolls and the rest of the page
+stays put.
 
 ```
 browser ──► uwudash (host:port) ──► /proxy/<id>/<path> ──► upstream origin

src/uwudash_mk3/static/styles.css

@@ -47,6 +47,10 @@ body {
 .sidebar {
   width: 220px;
   flex: 0 0 220px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
   background: var(--panel);
   border-right: 1px solid var(--border);
   display: flex;
@@ -58,10 +62,20 @@ body {
 .brand-name { font-size: 18px; font-weight: 700; }
 .brand-sub { color: var(--muted); font-size: 12px; }
 
-.service-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+.service-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
 
 .service-btn {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
@@ -243,6 +257,7 @@ body {
 .home-btn,
 .widget-btn {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;