Screwed around with the layout a bit

src/lib/components/media/scrollableCardMenu.svelte

@@ -3,44 +3,15 @@
     export let cardDataList
 
     import Card from '$lib/components/media/mediaCard.svelte'
-    import { onMount } from 'svelte'
-
-    let scrollableWrapper,
-        scrollableWrapperWidth,
-        scrollable,
-        scrollableWidth,
-        isHovered,
-        scrollpos = 0
-
-    onMount(() => {
-        scrollableWrapperWidth = scrollableWrapper.clientWidth - 96 // Account for x padding
-        scrollableWidth = Math.abs(scrollableWrapperWidth - scrollable.scrollWidth)
-    })
 </script>
 
-<section>
+<section class="overflow-visible">
     {#if header}
-        <h1 class="px-12 text-4xl"><strong>{header}</strong></h1>
+        <h1 class="text-4xl"><strong>{header}</strong></h1>
     {/if}
-    <div
-        bind:this={scrollableWrapper}
-        role="menu"
-        tabindex="-1"
-        class="overflow-hidden px-12 py-4"
-        on:focus={() => (isHovered = true)}
-        on:blur={() => (isHovered = false)}
-        on:wheel={(event) => {
-            if (isHovered) {
-                scrollpos += event.deltaY / 2 // Change divisor to adjust speed
-                scrollpos = Math.min(Math.max(0, scrollpos), scrollableWidth)
-                scrollable.style.transform = `translateX(-${scrollpos}px)`
-            }
-        }}
-    >
-        <div id="scrollable" bind:this={scrollable} class="no-scrollbar flex gap-6 transition-transform duration-200 ease-out">
-            {#each cardDataList as cardData}
-                <Card mediaData={cardData} />
-            {/each}
-        </div>
+    <div class="no-scrollbar flex gap-6 overflow-y-hidden overflow-x-scroll py-4">
+        {#each cardDataList as cardData}
+            <Card mediaData={cardData} />
+        {/each}
     </div>
 </section>