Fix home page horizontal bars

front/src/components/entries/entry-box.tsx

@@ -17,6 +17,7 @@ import { EntryContext } from "../items/context-menus";
 import { ItemProgress } from "../items/item-grid";
 
 export const EntryBox = ({
+	kind,
 	slug,
 	serieSlug,
 	name,
@@ -27,6 +28,7 @@ export const EntryBox = ({
 	className,
 	...props
 }: {
+	kind: "movie" | "episode" | "special";
 	slug: string;
 	// if serie slug is null, disable "Go to serie" in the context menu
 	serieSlug: string | null;
@@ -44,7 +46,7 @@ export const EntryBox = ({
 		<Link
 			href={moreOpened ? undefined : href}
 			onLongPress={() => setMoreOpened(true)}
-			className={cn("group w-[350px] items-center outline-0", className)}
+			className={cn("group w-[350px] items-center p-1 outline-0", className)}
 			{...props}
 		>
 			<ThumbnailBackground
@@ -58,6 +60,7 @@ export const EntryBox = ({
 			>
 				<ItemProgress watchPercent={watchedPercent} />
 				<EntryContext
+					kind={kind}
 					slug={slug}
 					serieSlug={serieSlug}
 					isOpen={moreOpened}
@@ -80,9 +83,9 @@ export const EntryBox = ({
 	);
 };
 
-EntryBox.Loader = ({ className, ...props }: { className?: string }) => {
+EntryBox.Loader = (props: object) => {
 	return (
-		<View className={cn("items-center", className)} {...props}>
+		<View className={"h-full w-[350px] items-center p-1"} {...props}>
 			<Image.Loader className="aspect-video w-full" />
 			<Skeleton className="w-1/2" />
 			<Skeleton className="h-3 w-4/5" />

front/src/components/items/context-menus.tsx

@@ -13,11 +13,13 @@ import { watchListIcon } from "./watchlist-info";
 // import { useDownloader } from "../../packages/ui/src/downloads/ui/src/downloads";
 
 export const EntryContext = ({
+	kind,
 	slug,
 	serieSlug,
 	className,
 	...props
 }: {
+	kind: "movie" | "episode" | "special";
 	serieSlug: string | null;
 	slug: string;
 	className?: string;
@@ -38,7 +40,7 @@ export const EntryContext = ({
 				<Menu.Item
 					label={t("home.episodeMore.goToShow")}
 					icon={Info}
-					href={`/series/${serieSlug}`}
+					href={`/${kind === "movie" ? "movies" : "series"}/${serieSlug}`}
 				/>
 			)}
 			{/* <Menu.Item */}

front/src/components/items/item-details.tsx

@@ -1,7 +1,7 @@
 import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
+import { ScrollView, View, type ViewProps } from "react-native";
 import { ItemContext } from "~/components/items/context-menus";
 import { ItemWatchStatus } from "~/components/items/item-helpers";
 import type { Genre, KImage, WatchStatusV } from "~/models";
@@ -49,8 +49,7 @@ export const ItemDetails = ({
 	watchStatus: WatchStatusV | null;
 	availableCount?: number | null;
 	seenCount?: number | null;
-	className?: string;
-}) => {
+} & ViewProps) => {
 	const [moreOpened, setMoreOpened] = useState(false);
 	const { t } = useTranslation();
 
@@ -82,8 +81,8 @@ export const ItemDetails = ({
 						seenCount={seenCount}
 					/>
 				</PosterBackground>
-				<View className="mb-14 flex-1 justify-end p-2">
-					<View className="my-2 flex-row-reverse justify-between">
+				<View className="mb-14 flex-1 justify-end">
+					<View className="my-2 flex-row-reverse justify-between p-2">
 						{kind !== "collection" && (
 							<ItemContext
 								kind={kind}
@@ -95,7 +94,7 @@ export const ItemDetails = ({
 						)}
 						{tagline && <P className="p-1">{tagline}</P>}
 					</View>
-					<ScrollView className="px-1">
+					<ScrollView className="p-3">
 						<SubP className="text-justify">
 							{description ?? t("show.noOverview")}
 						</SubP>
@@ -142,10 +141,13 @@ export const ItemDetails = ({
 	);
 };
 
-ItemDetails.Loader = (props: object) => {
+ItemDetails.Loader = ({ className, ...props }: ViewProps) => {
 	return (
 		<View
-			className={"h-72 flex-row overflow-hidden rounded-xl bg-card"}
+			className={cn(
+				"h-72 flex-row overflow-hidden rounded-xl bg-card",
+				className,
+			)}
 			{...props}
 		>
 			<View className="aspect-2/3 h-full bg-gray-400">

front/src/components/items/item-grid.tsx

@@ -71,7 +71,6 @@ export const ItemGrid = ({
 		>
 			<PosterBackground
 				src={poster}
-				alt={name}
 				quality="low"
 				className={cn(
 					"w-full",
@@ -113,9 +112,20 @@ export const ItemGrid = ({
 	);
 };
 
-ItemGrid.Loader = (props: object) => {
+ItemGrid.Loader = ({
+	horizontal = false,
+	...props
+}: {
+	horizontal?: boolean;
+}) => {
 	return (
-		<View className="w-full items-center" {...props}>
+		<View
+			className={cn(
+				"w-full items-center p-1",
+				horizontal && "h-full w-[200px]",
+			)}
+			{...props}
+		>
 			<Poster.Loader className="w-full" />
 			<Skeleton />
 			<Skeleton className="w-1/2" />

front/src/components/items/item-list.tsx

@@ -49,7 +49,8 @@ export const ItemList = ({
 			href={moreOpened ? undefined : href}
 			onLongPress={() => setMoreOpened(true)}
 			className={cn(
-				"group h-80 w-full outline-0 ring-accent focus-within:ring-3 hover:ring-3",
+				"group m-1 mx-2 h-80 overflow-hidden rounded",
+				"outline-0 ring-accent focus-within:ring-3 hover:ring-3",
 				className,
 			)}
 			{...props}
@@ -57,7 +58,7 @@ export const ItemList = ({
 			<ImageBackground
 				src={thumbnail}
 				quality="medium"
-				className="h-full w-full flex-row items-center justify-evenly overflow-hidden rounded"
+				className="h-full w-full flex-row items-center justify-evenly"
 			>
 				<View className="absolute inset-0 bg-linear-to-b from-transparent to-slate-950/70" />
 				<View className="w-1/2 lg:w-1/3">
@@ -111,7 +112,7 @@ export const ItemList = ({
 ItemList.Loader = (props: object) => {
 	return (
 		<View
-			className="h-80 w-full flex-row items-center justify-evenly overflow-hidden rounded bg-slate-800"
+			className="h-80 flex-row items-center justify-evenly overflow-hidden rounded bg-slate-800"
 			{...props}
 		>
 			<View className="w-1/2 justify-center lg:w-1/3">