feat(web): Rollbalken nur ueber dem Inhalt, X-Knopf in der Warteschlange

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

styles.css

@@ -61,6 +61,10 @@ html.ns-authed #setup-screen{display:none}
 /* ── APP LAYOUT ── */
 #app{display:none;height:100vh;flex-direction:column}
 .app-body{display:flex;flex:1;overflow:hidden}
+/* Spalte rechts der Seitenleiste: oben die feste Kopfzeile, darunter der Rollbereich.
+   Frueher lag die Kopfzeile IM Rollbereich (sticky) — der Rollbalken lief dadurch bis ganz
+   nach oben neben die Suchleiste, obwohl dort nichts rollt. */
+.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
 
 /* ── SIDEBAR ── */
 .sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--player-h)}
@@ -397,7 +401,10 @@ button:focus{outline:none}
 /* ── QUEUE PANEL ── */
 .queue-panel{position:fixed;right:0;top:0;bottom:var(--player-h);width:290px;background:var(--bg2);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s;z-index:90;display:flex;flex-direction:column;padding:18px 0}
 .queue-panel.open{transform:translateX(0)}
-.queue-title{font-size:15px;font-weight:700;padding:0 18px 14px;border-bottom:1px solid var(--border)}
+.queue-head{display:flex;align-items:center;gap:8px;padding:0 10px 14px 18px;border-bottom:1px solid var(--border)}
+.queue-title{font-size:15px;font-weight:700;flex:1;min-width:0}
+.queue-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;color:var(--text2);border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
+.queue-close:hover{background:var(--surface);color:var(--text)}
 .queue-list{flex:1;overflow-y:auto;padding:6px 10px}
 .queue-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .15s}
 .queue-item:hover{background:var(--surface)}