From ff4155de5e7f0f29886e68aa17454a698668e3a6 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 15 Jul 2025 00:00:52 +0200
Subject: [PATCH] Fix entries list container

---
 front/src/query/fetch-infinite.tsx |  9 ++++++++-
 front/src/ui/details/season.tsx    | 15 ++++++++++-----
 front/src/ui/details/serie.tsx     | 31 +++++++++++-------------------
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/front/src/query/fetch-infinite.tsx b/front/src/query/fetch-infinite.tsx
index e21a9ce7..98dc4548 100644
--- a/front/src/query/fetch-infinite.tsx
+++ b/front/src/query/fetch-infinite.tsx
@@ -1,5 +1,6 @@
 import { LegendList } from "@legendapp/list";
 import { type ComponentType, type ReactElement, useRef } from "react";
+import type { ViewStyle } from "react-native";
 import { type Breakpoint, HR, useBreakpointMap } from "~/primitives";
 import { useSetError } from "~/providers/error-provider";
 import { ErrorView } from "~/ui/errors";
@@ -23,6 +24,7 @@ export const InfiniteFetch = <Data,>({
 	divider,
 	Header,
 	fetchMore = true,
+	contentContainerStyle,
 	...props
 }: {
 	query: QueryIdentifier<Data>;
@@ -36,6 +38,7 @@ export const InfiniteFetch = <Data,>({
 	divider?: true | ComponentType;
 	Header?: ComponentType<{ children: JSX.Element }> | ReactElement;
 	fetchMore?: boolean;
+	contentContainerStyle?: ViewStyle;
 }): JSX.Element | null => {
 	const { numColumns, size, gap } = useBreakpointMap(layout);
 	const [setOffline, clearOffline] = useSetError("offline");
@@ -87,7 +90,11 @@ export const InfiniteFetch = <Data,>({
 				divider === true ? HR : (divider as any) || undefined
 			}
 			ListEmptyComponent={Empty}
-			contentContainerStyle={{ gap, marginHorizontal: gap }}
+			contentContainerStyle={{
+				...contentContainerStyle,
+				gap,
+				marginHorizontal: gap,
+			}}
 			{...props}
 		/>
 	);
diff --git a/front/src/ui/details/season.tsx b/front/src/ui/details/season.tsx
index cac2d736..95d8c6bd 100644
--- a/front/src/ui/details/season.tsx
+++ b/front/src/ui/details/season.tsx
@@ -6,6 +6,7 @@ import { rem, useYoshiki } from "yoshiki/native";
 import { EntryLine, entryDisplayNumber } from "~/components/entries";
 import { Entry, Season } from "~/models";
 import {
+	Container,
 	H2,
 	HR,
 	IconButton,
@@ -139,7 +140,11 @@ export const EntryList = ({
 			query={EntryList.query(slug, season)}
 			layout={EntryLine.layout}
 			Empty={<EmptyView message={t("show.episode-none")} />}
-			divider
+			divider={() => (
+				<Container>
+					<HR />
+				</Container>
+			)}
 			// getItemType={(item) =>
 			// 	item.kind === "episode" && item.episodeNumber === 1? "withHeader" : "normal"
 			// }
@@ -150,7 +155,7 @@ export const EntryList = ({
 						? seasons?.find((x) => x.seasonNumber === item.seasonNumber)
 						: null;
 				return (
-					<>
+					<Container>
 						{sea && (
 							<SeasonHeader
 								serieSlug={slug}
@@ -166,14 +171,14 @@ export const EntryList = ({
 							displayNumber={entryDisplayNumber(item)}
 							watchedPercent={item.progress.percent}
 						/>
-					</>
+					</Container>
 				);
 			}}
 			Loader={({ index }) => (
-				<>
+				<Container>
 					{index === 0 && <SeasonHeader.Loader />}
 					<EntryLine.Loader />
-				</>
+				</Container>
 			)}
 			{...props}
 		/>
diff --git a/front/src/ui/details/serie.tsx b/front/src/ui/details/serie.tsx
index 4f6b9bf9..9fc16309 100644
--- a/front/src/ui/details/serie.tsx
+++ b/front/src/ui/details/serie.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Path, type SvgProps } from "react-native-svg";
 import { percent, useYoshiki } from "yoshiki/native";
 import { EntryLine, entryDisplayNumber } from "~/components/entries";
@@ -97,25 +98,12 @@ NextUp.Loader = () => {
 	);
 };
 
-const SerieHeader = ({ children, ...props }: any) => {
+const SerieHeader = () => {
 	const { css, theme } = useYoshiki();
 	const [slug] = useQueryState("slug", undefined!);
 
 	return (
-		<View
-			{...css(
-				[
-					{ bg: (theme) => theme.background },
-					Platform.OS === "web" && {
-						flexGrow: 1,
-						flexShrink: 1,
-						// @ts-ignore Web only property
-						overflowY: "auto" as any,
-					},
-				],
-				props,
-			)}
-		>
+		<View {...css({ bg: (theme) => theme.background })}>
 			<Header kind="serie" slug={slug} />
 			<Fetch
 				// Use the same fetch query as header
@@ -133,9 +121,6 @@ const SerieHeader = ({ children, ...props }: any) => {
 				fill={theme.variant.background}
 				{...css({ flexShrink: 0, flexGrow: 1, display: "flex" })}
 			/>
-			<View {...css({ bg: theme.variant.background })}>
-				<Container>{children}</Container>
-			</View>
 		</View>
 	);
 };
@@ -144,10 +129,16 @@ export const SerieDetails = () => {
 	const { css, theme } = useYoshiki();
 	const [slug] = useQueryState("slug", undefined!);
 	const [season] = useQueryState("season", undefined!);
+	const insets = useSafeAreaInsets();
 
 	return (
 		<View {...css({ bg: theme.variant.background, flex: 1 })}>
-			<EntryList slug={slug} season={season} Header={SerieHeader} />
+			<EntryList
+				slug={slug}
+				season={season}
+				Header={SerieHeader}
+				contentContainerStyle={{ paddingBottom: insets.bottom }}
+			/>
 		</View>
 	);
 };