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;