Big layout improvements, started on miniplayer

src/lib/components/media/scrollableCardMenu.svelte

@@ -6,7 +6,12 @@
     import IconButton from '$lib/components/utility/iconButton.svelte'
 
     let scrollable,
+        scrollableWidth,
+        isScrollable = false,
         scrollpos = 0
+
+    $: isScrollable = scrollable?.scrollWidth > scrollableWidth
+    $: scrollpos = scrollable?.scrollLeft / (scrollable?.scrollWidth - scrollableWidth)
 </script>
 
 <section>
@@ -15,16 +20,17 @@
             <h1 class="text-4xl"><strong>{header}</strong></h1>
         {/if}
         <div class="flex h-full gap-2">
-            <IconButton disabled={scrollpos < 0.01} on:click={() => (scrollable.scrollLeft -= scrollable.clientWidth)}>
+            <IconButton disabled={scrollpos < 0.01 || !isScrollable} on:click={() => (scrollable.scrollLeft -= scrollable.clientWidth)}>
                 <i slot="icon" class="fa-solid fa-angle-left" />
             </IconButton>
-            <IconButton disabled={scrollpos > 0.99} on:click={() => (scrollable.scrollLeft += scrollable.clientWidth)}>
+            <IconButton disabled={scrollpos > 0.99 || !isScrollable} on:click={() => (scrollable.scrollLeft += scrollable.clientWidth)}>
                 <i slot="icon" class="fa-solid fa-angle-right" />
             </IconButton>
         </div>
     </div>
     <div
         bind:this={scrollable}
+        bind:clientWidth={scrollableWidth}
         on:scroll={() => (scrollpos = scrollable.scrollLeft / (scrollable.scrollWidth - scrollable.clientWidth))}
         class="no-scrollbar flex gap-6 overflow-y-hidden overflow-x-scroll scroll-smooth py-4"
     >