From b96c3848adfbed29c876e094683dac594f423e33 Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Mon, 29 Jan 2024 15:55:22 -0500
Subject: [PATCH] Scrolling behavior is still stupid

---
 src/lib/components/navbar/playlistTab.svelte | 34 ++++++++++++--------
 src/routes/(app)/+layout.svelte              |  2 +-
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/navbar/playlistTab.svelte b/src/lib/components/navbar/playlistTab.svelte
index 6becbff..3e2724d 100644
--- a/src/lib/components/navbar/playlistTab.svelte
+++ b/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}
-        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}}`)
-        }}
-    >
-    </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>
+<button
+    {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}`)
+    }}
+>
+    <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>
 
 <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>
\ No newline at end of file
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 1111c42..0fb8c94 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/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}