Fixes to tab selection

src/lib/components/Carousel/Carousel.svelte

@@ -33,6 +33,7 @@
 	<div
 		class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative px-8 scrollbar-hide py-4"
 		bind:this={carousel}
+		tabindex="-1"
 		on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
 	>
 		<slot />

src/lib/components/IconButton.svelte

@@ -5,10 +5,13 @@
 </script>
 
 <button
-	class={classNames('text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center', {
-		'opacity-30 cursor-not-allowed pointer-events-none': disabled,
-		'cursor-pointer': !disabled
-	})}
+	class={classNames(
+		'text-zinc-300 hover:text-zinc-50 p-1 flex items-center justify-center selectable rounded-sm',
+		{
+			'opacity-30 cursor-not-allowed pointer-events-none': disabled,
+			'cursor-pointer': !disabled
+		}
+	)}
 	on:click|stopPropagation
 >
 	<slot />

src/lib/components/Navbar/Navbar.svelte

@@ -12,7 +12,10 @@
 	let isSearchVisible = false;
 
 	function getLinkStyle(path: string) {
-		return $page.url.pathname === path ? 'text-amber-200' : 'hover:text-zinc-50 cursor-pointer';
+		return classNames('selectable-tab rounded-sm px-2 -mx-2', {
+			'text-amber-200': $page.url.pathname === path,
+			'hover:text-zinc-50 cursor-pointer': $page.url.pathname !== path
+		});
 	}
 
 	// TODO: on mobile don't act sticky
@@ -32,7 +35,10 @@
 <svelte:window bind:scrollY={y} />
 
 <div class={baseStyle}>
-	<a href="/" class="flex gap-2 items-center hover:text-inherit">
+	<a
+		href="/"
+		class="flex gap-2 items-center hover:text-inherit selectable-tab rounded-sm px-2 -mx-2"
+	>
 		<div class="rounded-full bg-amber-300 h-4 w-4" />
 		<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
 	</a>