diff --git a/README.md b/README.md index 5d23813..0c4c94f 100644 --- a/README.md +++ b/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// ──► upstream origin diff --git a/src/uwudash_mk3/static/styles.css b/src/uwudash_mk3/static/styles.css index ee0a58a..23c3681 100644 --- a/src/uwudash_mk3/static/styles.css +++ b/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;