style: Adjust episode grid translate

src/lib/components/Carousel/Carousel.svelte

@@ -51,7 +51,7 @@
 		<Container direction="horizontal" let:focusIndex on:enter {...$$restProps} class="">
 			<div
 				class={classNames(
-					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
+					'flex overflow-x-scroll items-center overflow-y-hidden relative scrollbar-hide',
 					'[&>*]:p-4 -mx-4 w-full',
 					scrollClass
 				)}

src/lib/components/SeriesPage/EpisodeGrid.svelte

@@ -10,12 +10,18 @@
 	import CardGrid from '../CardGrid.svelte';
 	import UICarousel from '../Carousel/UICarousel.svelte';
 	import classNames from 'classnames';
+	import ScrollHelper from '../ScrollHelper.svelte';
 
 	export let id: number;
 	export let tmdbSeries: Readable<TmdbSeriesFull2 | undefined>;
 	export let jellyfinEpisodes: Readable<JellyfinItem[] | undefined>;
 	export let currentJellyfinEpisode: Readable<JellyfinItem | undefined>;
-	export let hideSeasons = false;
+
+	const seasonButtons = useRegistrars<number>();
+	const episodeCards = useRegistrars<string>();
+	let seasonIndex = 0;
+	let scrollTop: number;
+	$: translateUp = scrollTop < 140;
 
 	const { data: tmdbSeasons } = useDependantRequest(
 		(seasons: number) => tmdbApi.getTmdbSeriesSeasons(id, seasons),
@@ -23,10 +29,6 @@
 		(series) => (series?.seasons?.length ? ([series.seasons.length] as const) : undefined)
 	);
 
-	const seasonButtons = useRegistrars<number>();
-	const episodeCards = useRegistrars<string>();
-	let seasonIndex = 0;
-
 	currentJellyfinEpisode.subscribe((episode) => {
 		if (!episode) return;
 
@@ -40,15 +42,17 @@
 	});
 </script>
 
+<ScrollHelper bind:scrollTop />
+
 <Container
 	on:enter
 	class={classNames('transition-transform mx-20', {
-		'-translate-y-20': hideSeasons
+		'-translate-y-24': translateUp
 	})}
 >
 	<UICarousel
 		class={classNames('flex -mx-2 transition-opacity mb-8', {
-			'opacity-0': hideSeasons
+			'opacity-0': translateUp
 		})}
 	>
 		{#each $tmdbSeasons || [] as season, i}