CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

player layout improvements

Browse Source
This commit is contained in:
Yura
2026-02-06 04:47:39 -08:00
parent f4e3c6eb08
commit d0efb3549b
1 changed files with 65 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/GlobalPlayer.svelte
View File

@@ -597,9 +597,10 @@
</div>
{#if snap.uiOpen}
<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
<div class="mx-auto max-w-4xl space-y-3">
<div class="flex flex-wrap items-center gap-2">
<div class="h-[65dvh] overflow-hidden border-t">
<div class="mx-auto flex h-full max-w-4xl flex-col px-3 py-3">
<!-- Controls stay visible while the queue scrolls -->
<div class="flex flex-wrap items-center gap-2 pb-3">
<button
class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
@@ -683,13 +684,17 @@
</label>
</div>
<!-- Scroll area: only the queue scrolls -->
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<div class="space-y-1">
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
<div class="text-sm font-semibold">
Queue ({snap.queue.length})
</div>
{#if snap.queue.length === 0}
<p class="text-sm text-muted-foreground">Queue is empty.</p>
{:else}
<ul class="overflow-auto rounded border">
<ul class="rounded border">
{#each queueDisplay as item (item.track.id)}
<li
class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
@@ -747,18 +752,17 @@
</div>
</div>
</div>
</div>
{/if}
</div>
</Portal>
<!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
<aside
class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col"
class="hidden lg:flex sticky top-12 h-[calc(100dvh-4rem)] overflow-hidden bg-background flex-col"
>
<div class="flex items-center gap-2 border-b px-3 py-3">
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-semibold">Player</div>
{#if snap.currentTrack}
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
{#if typeNumberLabel(snap.currentTrack)}