The behaviour of css overflow is so fucking stupid

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

@@ -59,8 +59,9 @@
 </script>
 
 {#if $pageWidth >= 768}
-    <div id="content-grid" class="grid h-full grid-rows-1 gap-8 overflow-hidden">
+    <div class="grid h-full grid-rows-1 gap-8 overflow-hidden">
-        <div id="sidebar" class="relative grid h-full grid-cols-1 gap-6 overflow-clip p-3 pt-12" bind:this={tabList}>
+        <div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full grid-cols-1 grid-rows-[min-content_auto] gap-6 p-3 pt-12" bind:this={tabList}>
+            <div class="flex flex-col gap-6">
                 {#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
                     <button
                         class="navTab grid aspect-square w-14 place-items-center transition-colors"
@@ -77,28 +78,33 @@
                         </span>
                     </button>
                 {/each}
-            <section class="no-scrollbar flex flex-col gap-4 overflow-y-scroll px-1">
+                <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="no-scrollbar flex flex-col gap-6 overflow-y-scroll">
                 {#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
+                    <div class="playlistTab-wrapper flex items-center gap-1">
                         <button
                             title={playlist.name}
                             disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
-                        class="playlistTab aspect-square w-full rounded-lg border-white bg-cover bg-center transition-all"
+                            class="playlistTab relative aspect-square w-14 rounded-lg bg-cover bg-center transition-all"
                             style="background-image: url({playlist.icon});"
                             on:click={() => {
                                 calculateDirection(playlist)
                                 goto(playlist.pathname)
                             }}
-                    ></button>
+                        >
+                        </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>
                 {/each}
-            </section>
+            </div>
-            <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
         </div>
         <section class="no-scrollbar relative overflow-y-scroll">
             {#key data.url}
                 <div
                     in:fly={{ y: -50 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
                     out:fly={{ y: 50 * directionMultiplier, duration: pageTransitionTime }}
-                    class="absolute w-full pr-[5vw] pt-16"
+                    class="absolute w-full px-[clamp(7rem,_5vw,_24rem)] pt-16"
                 >
                     <slot />
                 </div>
@@ -135,18 +141,15 @@
 {/if}
 
 <style>
-    #content-grid {
-        grid-template-columns: max-content auto;
-    }
-    #sidebar {
-        grid-template-rows: repeat(4, min-content) auto;
-    }
     .navTab:not(:disabled) {
         color: rgb(163 163, 163);
     }
     .navTab:not(:disabled):hover {
         color: var(--lazuli-primary);
     }
+    .playlistTab-wrapper:hover > span {
+        display: block;
+    }
     .playlistTab:not(:disabled):not(:hover) {
         filter: brightness(50%);
     }

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

@@ -8,7 +8,7 @@ export interface Tab {
     button?: HTMLButtonElement
 }
 
-export const load: LayoutLoad = ({ url }) => {
+export const load: LayoutLoad = () => {
     const navTabs: Tab[] = [
         {
             type: 'nav',
@@ -49,6 +49,42 @@ export const load: LayoutLoad = ({ url }) => {
             name: 'Fionaredica',
             icon: 'https://f4.bcbits.com/img/a2436961975_10.jpg',
         },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=Machinate',
+            name: 'Machinate',
+            icon: 'https://f4.bcbits.com/img/a3587136348_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=MAGGOD',
+            name: 'MAGGOD',
+            icon: 'https://f4.bcbits.com/img/a3641603617_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=The Requiem',
+            name: 'The Requiem',
+            icon: 'https://f4.bcbits.com/img/a2458067285_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
+            name: 'IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
+            icon: 'https://f4.bcbits.com/img/a1483629734_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=妄殺オタクティクス',
+            name: '妄殺オタクティクス',
+            icon: 'https://f4.bcbits.com/img/a1653481367_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=Collapse',
+            name: 'Collapse',
+            icon: 'https://f4.bcbits.com/img/a0524413952_10.jpg',
+        },
     ]
 
     return { tabs: navTabs.concat(playlistTabs) }

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

@@ -1,2 +1,7 @@
-<h1>Welcome to SvelteKit</h1>
+<div id="test-box" class="h-[200vh]"></div>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<style>
+    #test-box {
+        background: linear-gradient(to bottom, white, black);
+    }
+</style>