From dab9d4f5f7fa640b2bd51986e65ffe0e44fbcc0e Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 03:25:58 -0800
Subject: [PATCH] mobile player improvements

---
 src/lib/components/GlobalPlayer.svelte | 30 +++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index 1a24ae1..de34f42 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -420,7 +420,7 @@
 {#if isMobile}
 	<!-- Mobile: mini bar + expandable drawer -->
 	<div
-		class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur"
+		class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
 	>
 		<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
 			<button
@@ -432,7 +432,27 @@
 				{snap.uiOpen ? "Close" : "Player"}
 			</button>
 
-			<div class="min-w-0 flex-1">
+			<div
+				class="min-w-0 flex-1"
+				role="button"
+				tabindex="0"
+				aria-label={snap.uiOpen ? "Close player" : "Open player"}
+				onclick={(e) => {
+					const t = e.target as HTMLElement | null;
+					// Only toggle when tapping the track info area. Avoid toggling from
+					// the button zones (above/below/side) by not attaching handlers to the
+					// whole bar.
+					if (t?.closest("button,input,label,a")) return;
+					toggleUiOpen();
+				}}
+				onkeydown={(e) => {
+					if (e.key !== "Enter" && e.key !== " ") return;
+					const t = e.target as HTMLElement | null;
+					if (t?.closest("button,input,label,a")) return;
+					e.preventDefault();
+					toggleUiOpen();
+				}}
+			>
 				{#if snap.currentTrack}
 					<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
 						{#if typeNumberLabel(snap.currentTrack)}
@@ -442,7 +462,7 @@
 								{typeNumberLabel(snap.currentTrack)}
 							</span>
 						{/if}
-						<span class="truncate text-sm">
+						<span class="truncate">
 							{(
 								snap.currentTrack.animeName ??
 								snap.currentTrack.album ??
@@ -505,7 +525,7 @@
 		</div>
 
 		{#if snap.uiOpen}
-			<div class="border-t px-3 py-3">
+			<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">
 						<button
@@ -545,7 +565,7 @@
 						{#if snap.queue.length === 0}
 							<p class="text-sm text-muted-foreground">Queue is empty.</p>
 						{:else}
-							<ul class="max-h-64 overflow-auto rounded border">
+							<ul class="overflow-auto 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"