fix(queue-panel): let Up Next fill the available height

[InstaZDLL]

Summary

User flagged the play queue panel showing a wide empty band between the last visible row and the volume strip — most visible on 1080p+ displays. Root cause: the virtualized Up Next scroll container at QueuePanel.tsx:397 carried a max-h-[55vh] cap that truncated the list to ~55 % of the viewport regardless of how much vertical room the panel actually had.

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

Fix

Restructured 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.

One scroller, fills the panel down to the volume strip, no truncation regardless of viewport size.

Test plan

• bun run typecheck clean
• bun run lint clean
• Manual smoke: open the queue panel on a 1080p+ display with a 100+ track queue → list should now extend to just above the volume strip; scrolling stays in a single scroller without crossing into a parent scroll context.
• Manual smoke: shorter queue (~5 tracks) → list still hugs its content, no awkward expand.
• DnD reorder still works (virtualization unchanged, only the scroll container sizing moved).

Summary by CodeRabbit

• Améliorations de l'interface
  • Optimisation de la disposition et du défilement du panneau de file d'attente pour une meilleure utilisation de l'espace disponible.
  • Meilleure organisation visuelle des sections "En cours de lecture" et "À venir" pour une navigation plus fluide.

[coderabbitai]

📝 Walkthrough

Walkthrough

QueuePanel restructure ses conteneurs pour utiliser le dimensionnement flexible (flex-1 min-h-0) à la place des hauteurs fixes et overflow-y-auto, incluant le wrapper principal, les sections "Now playing" et "Up Next", et le conteneur scroll interne de SortableUpNext.

Changes

Restructuration du layout flexible du QueuePanel

Layer / File(s)	Summary
Restructuration des conteneurs et sections du QueuePanel src/components/layout/QueuePanel.tsx	Wrapper principal passe de overflow-y-auto à flex-1 min-h-0. Les sections "Now playing" et "Up Next" sont restructurées avec des classes de dimensionnement dédiées (shrink-0 et flex-1). Le conteneur scroll interne de SortableUpNext change de max-h-[55vh] à flex-1 min-h-0 overflow-y-auto pour aligner le dimensionnement flexible.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

type: fix, size: s, scope: frontend

Poem

🎵 La queue prend forme avec flexibilité,
Les sections s'alignent avec harmonie,
Fini les hauteurs figées et rigides—
Le layout respire, fluide et vivide! 🎶

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Le titre suit les conventions Conventional Commits avec un scope kebab-case valide et décrit précisément la correction apportée : la résolution du problème de remplissage vertical du conteneur Up Next.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	La description PR respecte le template requis avec un résumé clair du problème et de la solution, un plan de test détaillé avec statuts, et suit les conventions Conventional Commits.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/queue-panel-fill-available-height

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}