From 9fefdf721a752e0fb44fcd8d6d998080c7a90fe2 Mon Sep 17 00:00:00 2001
From: 409 <bloecker.s@gmail.com>
Date: Tue, 26 Nov 2024 00:45:14 +0100
Subject: [PATCH] fix(footer): grid col spans

---
 src/lib/components/groove/Footer.svelte | 176 +++++++++++++-----------
 1 file changed, 92 insertions(+), 84 deletions(-)

diff --git a/src/lib/components/groove/Footer.svelte b/src/lib/components/groove/Footer.svelte
index 1bcfcc9..8073ab9 100644
--- a/src/lib/components/groove/Footer.svelte
+++ b/src/lib/components/groove/Footer.svelte
@@ -98,7 +98,7 @@
 
 <footer class="border border-x-0 border-t border-border/40 bg-background/95 px-4">
 	<nav class="my-2 grid w-full grid-cols-5 items-center">
-		<div class="col-span-1 flex items-end gap-2">
+		<div class="col-span-2 flex items-end gap-2 self-start">
 			{#if player.currentlyPlaying}
 				<img
 					class="aspect-square w-16 rounded-md shadow-2xl shadow-primary/50"
@@ -114,7 +114,7 @@
 			{/if}
 		</div>
 		<form
-			class="col-span-3 flex justify-center gap-1"
+			class="col-span-1 flex justify-center gap-1"
 			method="POST"
 			use:enhance={submitTogglePause}
 		>
@@ -132,91 +132,93 @@
 				<SkipForward />
 			</Button>
 		</form>
-		<div class="col-span-1 flex items-center">
-			<Popover.Root>
-				<Popover.Trigger class="mr-8 flex items-center text-sm">
-					{#snippet child({ props })}
-						<Button {...props} variant="ghost" size="sm">
-							<List class="mr-2 size-4" />
-							<span>15</span>
-						</Button>
-					{/snippet}
-				</Popover.Trigger>
-				<Popover.Content class="flex max-h-[max(50vh,300px)] w-64 flex-col overflow-y-hidden">
-					<p class="font-semibold">Next up</p>
+		<div class="col-span-2 flex items-center justify-end">
+			<div class="flex items-center">
+				<Popover.Root>
+					<Popover.Trigger class="mr-8 flex items-center text-sm">
+						{#snippet child({ props })}
+							<Button {...props} variant="ghost" size="sm">
+								<List class="mr-2 size-4" />
+								<span>15</span>
+							</Button>
+						{/snippet}
+					</Popover.Trigger>
+					<Popover.Content class="flex max-h-[max(50vh,300px)] w-64 flex-col overflow-y-hidden">
+						<p class="font-semibold">Next up</p>
 
-					<Separator class="my-1" />
+						<Separator class="my-1" />
 
-					<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
-						{#each [] as _song, i}
-							<button
-								class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
-								onclick={() => skipToQueueIndex(i)}
-							>
-								<div class="min-w-8 overflow-hidden rounded-md">
-									<img
-										src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
-										class="aspect-square size-8"
-										alt="Cover"
-									/>
-								</div>
-								<div class="flex flex-col overflow-hidden">
-									<p
-										class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
-									>
-										Song name
-									</p>
-									<p
-										class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
-									>
-										Song artist
-									</p>
-								</div>
-							</button>
-						{/each}
+						<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
+							{#each [] as _song, i}
+								<button
+									class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
+									onclick={() => skipToQueueIndex(i)}
+								>
+									<div class="min-w-8 overflow-hidden rounded-md">
+										<img
+											src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
+											class="aspect-square size-8"
+											alt="Cover"
+										/>
+									</div>
+									<div class="flex flex-col overflow-hidden">
+										<p
+											class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
+										>
+											Song name
+										</p>
+										<p
+											class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
+										>
+											Song artist
+										</p>
+									</div>
+								</button>
+							{/each}
+						</div>
+					</Popover.Content>
+				</Popover.Root>
+
+				<div class="flex grow flex-row items-center gap-4">
+					<div class="min-w-6 text-muted-foreground">
+						{#if player.volume <= 0.0}
+							<VolumeX class="size-full" />
+						{:else if player.volume < 0.5}
+							<Volume1 class="size-full" />
+						{:else}
+							<Volume2 class="size-full" />
+						{/if}
+					</div>
+					<form
+						bind:this={volumeForm}
+						class="volume-form flex-1"
+						method="POST"
+						action="/player?/volume"
+						use:enhance={submitVolumeForm}
+					>
+						<input
+							class="volume-slider min-w-40"
+							type="range"
+							min={0.0}
+							max={1.0}
+							step={0.01}
+							bind:value={player.volume}
+							oninput={() => {
+								volumeForm?.requestSubmit();
+							}}
+							onmousedown={() => {
+								player.adjustingVolume = true;
+							}}
+							onmouseup={() => {
+								player.adjustingVolume = false;
+							}}
+						/>
+					</form>
+					<div class="min-w-10 self-center">
+						<p class="text-sm text-muted-foreground">
+							{Math.round(player.volume * 100.0)}%
+						</p>
 					</div>
-				</Popover.Content>
-			</Popover.Root>
-
-			<div class="flex grow flex-row items-center gap-4">
-				<div class="min-w-6 text-muted-foreground">
-					{#if player.volume <= 0.0}
-						<VolumeX class="size-full" />
-					{:else if player.volume < 0.5}
-						<Volume1 class="size-full" />
-					{:else}
-						<Volume2 class="size-full" />
-					{/if}
-				</div>
-				<form
-					bind:this={volumeForm}
-					class="flex-1"
-					method="POST"
-					action="/player?/volume"
-					use:enhance={submitVolumeForm}
-				>
-					<input
-						class="volume-slider"
-						type="range"
-						min={0.0}
-						max={1.0}
-						step={0.01}
-						bind:value={player.volume}
-						oninput={() => {
-							volumeForm?.requestSubmit();
-						}}
-						onmousedown={() => {
-							player.adjustingVolume = true;
-						}}
-						onmouseup={() => {
-							player.adjustingVolume = false;
-						}}
-					/>
-				</form>
-				<div class="min-w-10 self-center">
-					<p class="text-sm text-muted-foreground">
-						{Math.round(player.volume * 100.0)}%
-					</p>
 				</div>
 			</div>
 		</div>
@@ -260,11 +262,13 @@
 		opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
 		-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
 		transition: opacity 0.2s;
+		-webkit-user-drag: none;
 	}
 
 	.volume-slider::-webkit-slider-thumb {
 		@apply size-4 bg-background ring ring-secondary ring-offset-0 ring-offset-transparent transition-colors;
 
+		-webkit-user-drag: none;
 		appearance: none;
 		background-color: hsl(var(--primary));
 		border-radius: 100%;
@@ -273,4 +277,8 @@
 	.volume-slider::-webkit-slider-thumb:active {
 		@apply ring-offset-2 ring-offset-background;
 	}
+
+	.volume-form {
+		-webkit-user-drag: none;
+	}
 </style>