fix(footer): grid col spans

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,7 +132,8 @@
 				<SkipForward />
 			</Button>
 		</form>
-		<div class="col-span-1 flex items-center">
+		<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 })}
@@ -190,13 +191,13 @@
 					</div>
 					<form
 						bind:this={volumeForm}
-					class="flex-1"
+						class="volume-form flex-1"
 						method="POST"
 						action="/player?/volume"
 						use:enhance={submitVolumeForm}
 					>
 						<input
-						class="volume-slider"
+							class="volume-slider min-w-40"
 							type="range"
 							min={0.0}
 							max={1.0}
@@ -220,6 +221,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 	</nav>
 	<div class="mb-2 flex flex-row items-center gap-2">
 		<span class="w-12 text-left text-sm"
@@ -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>