From 54ad82f09b450de5eb7012cbef844a10ff90d570 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 25 May 2026 23:29:03 +0200
Subject: [PATCH] fix(queue-panel): let the Up Next list fill the available
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Up Next scroll container carried a `max-h-[55vh]` cap that
truncated the rendered virtualized list to ~55% of the viewport,
leaving a visible empty band between the last row and the volume
controls at the bottom of the panel — most obvious on 1080p+
displays where the panel had hundreds of px of unused vertical
space.

Worse, the parent content wrapper also had `overflow-y-auto` so the
nested cap was producing two independent scrollers: the inner one
maxed at 55vh, then scrolling further engaged the outer one, with no
visual cue that the user had crossed from one to the other.

Restructure the inner column as a proper flex stack:
- Content wrapper switches from `overflow-y-auto` to
  `flex flex-col min-h-0` so its children flow as flex items.
- Radio banner + Now Playing section pin to their natural height via
  `shrink-0`.
- Up Next section becomes `flex-1 flex flex-col min-h-0`, and its
  inner virtualizer scroll element trades the `max-h-[55vh]` cap for
  `flex-1 min-h-0 overflow-y-auto` so it consumes everything left
  over after the eyebrow.

Net result: one scroller, fills the panel down to the volume strip,
no truncation regardless of viewport size.
---
 src/components/layout/QueuePanel.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/QueuePanel.tsx b/src/components/layout/QueuePanel.tsx
index eb82526..7398190 100644
--- a/src/components/layout/QueuePanel.tsx
+++ b/src/components/layout/QueuePanel.tsx
@@ -212,9 +212,9 @@ export function QueuePanel() {
             </p>
           </div>
         ) : (
-          <div className="flex-1 overflow-y-auto -mx-2 px-2 space-y-5 scrollbar-hide">
+          <div className="flex-1 flex flex-col min-h-0 -mx-2 px-2 space-y-5">
             {snapshot?.source_type === "radio" && items[0] && (
-              <div className="flex items-center gap-3 p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-900/40">
+              <div className="shrink-0 flex items-center gap-3 p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-900/40">
                 <div className="shrink-0 w-9 h-9 rounded-full bg-emerald-500/15 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                   <Radio size={18} />
                 </div>
@@ -229,7 +229,7 @@ export function QueuePanel() {
               </div>
             )}
             {nowPlaying && (
-              <section>
+              <section className="shrink-0">
                 <div className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase mb-2 px-1">
                   {t("queue.nowPlaying")}
                 </div>
@@ -237,7 +237,7 @@ export function QueuePanel() {
               </section>
             )}
             {upNext.length > 0 && (
-              <section>
+              <section className="flex-1 flex flex-col min-h-0">
                 <div className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase mb-2 px-1">
                   {t("queue.upNext", { count: upNext.length })}
                 </div>
@@ -394,7 +394,7 @@ function SortableUpNext({
       <SortableContext items={ids} strategy={verticalListSortingStrategy}>
         <div
           ref={scrollRef}
-          className="max-h-[55vh] overflow-y-auto scrollbar-hide"
+          className="flex-1 min-h-0 overflow-y-auto scrollbar-hide"
         >
           <div
             style={{