Scrolling behavior is still stupid

src/lib/components/navbar/playlistTab.svelte

@@ -14,25 +14,31 @@
     import { goto } from "$app/navigation";
 
     const dispatch = createEventDispatcher()
+
+    let button: HTMLButtonElement
 </script>
 
-<div class="flex items-center gap-1">
 <button
-        title={playlist.name}
     {disabled}
+    bind:this={button}
     class="relative aspect-square w-full rounded-lg bg-cover bg-center transition-all"
     style="background-image: url({playlist.thumbnail});"
     on:click={() => {
         dispatch('click')
-            goto(`/library?playlist=${playlist.id}}`)
+        goto(`/library?playlist=${playlist.id}`)
     }}
 >
+    <span class="absolute left-full top-1/2 overflow-clip text-ellipsis whitespace-nowrap rounded-md bg-gray-900 px-2 py-1 text-sm origin-left transition-transform duration-75">{playlist.name}</span>
 </button>
-    <span class="translate-x-3 overflow-clip text-ellipsis whitespace-nowrap rounded-md bg-slate-600 px-2 py-1 text-sm">{playlist.name}</span>
-</div>
 
 <style>
     button:not(:disabled):not(:hover) {
         filter: brightness(50%);
     }
+    span {
+        transform: translateX(0.75rem) translateY(-50%) scale(0);
+    }
+    button:hover > span {
+        transform: translateX(0.75rem) translateY(-50%) scale(100%);
+    }
 </style>

src/routes/(app)/+layout.svelte

@@ -68,7 +68,7 @@
                 {/each}
                 <!-- <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" /> -->
             </div>
-            <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-6 px-1">
                 {#each data.playlistTabs as playlist}
                     <PlaylistTabComponent {playlist} disabled={new URLSearchParams(data.url.search).get('playlist') === playlist.id} />
                 {/each}