web-player/src/lib/components/player/Queue.svelte

@@ -6,8 +6,6 @@
 	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
-	import { fly } from 'svelte/transition';
-	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -15,10 +13,13 @@
 	});
 </script>
 
-{#if queuePanel.open}
+<div
+	class="queue-shell max-sm:hidden"
+	data-open={queuePanel.open ? '' : undefined}
+	inert={!queuePanel.open}
+>
 	<aside
-		transition:fly={{ x: 24, duration: 200, easing: expoOut }}
+		class="flex shrink-0 flex-col border-l border-hairline px-4 pt-5"
-		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
@@ -77,4 +78,4 @@
 			{/each}
 		</div>
 	</aside>
-{/if}
+</div>

web-player/src/routes/layout.css

@@ -191,6 +191,22 @@
 		transparent 62%
 	);
 }
+@utility queue-shell {
+	display: flex;
+	justify-content: flex-end;
+	flex-shrink: 0;
+	overflow: hidden;
+	width: 0;
+	visibility: hidden;
+	transition:
+		width var(--mf-motion-slow) ease-in-out,
+		visibility var(--mf-motion-slow);
+
+	&[data-open] {
+		width: var(--mf-queue-w);
+		visibility: visible;
+	}
+}
 @utility app-main {
 	--mf-dock-h: 0px;
 	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));