From 30a05d3ebd2c2a24957cac1ff659ef66145dc514 Mon Sep 17 00:00:00 2001 From: Jonathan Sykes Date: Wed, 1 Jul 2026 03:58:52 +0800 Subject: [PATCH] fix: make sidebar scroll as one unit so playlists stay reachable on short screens The sidebar contained two .playlist-list blocks each with flex:1 and its own overflow-y:auto, nested inside the sidebar's own scroll. On screens too short to fit everything, those inner flex regions collapsed toward zero height and the playlists became unreachable. Drop the inner scroll/flex-grow and let the whole sidebar scroll as a single unit at any screen size. --- frontend/styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/styles.css b/frontend/styles.css index a884933..54bf6ce 100755 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -93,6 +93,10 @@ body::after { overflow-y: auto; overflow-x: hidden; } +/* The whole sidebar scrolls as a single unit; keep its sections at their + natural height so the playlists are always reachable on short screens + instead of collapsing competing inner scroll regions. */ +.sidebar > * { flex-shrink: 0; } .brand { font-family: var(--display); @@ -170,7 +174,7 @@ body::after { } .icon-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); } -.playlist-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; } +.playlist-list { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; } .playlist-item { display: flex; align-items: center;