Fix home page for small screens

front/packages/ui/src/details/header.tsx

@@ -361,15 +361,7 @@ export const Header = ({
 						src={data?.thumbnail}
 						quality="high"
 						alt=""
-						containerStyle={{
-							height: {
-								xs: vh(40),
-								sm: min(vh(60), px(750)),
-								md: min(vh(60), px(680)),
-								lg: vh(70),
-							},
-							minHeight: { xs: px(350), sm: px(300), md: px(400), lg: px(600) },
-						}}
+						containerStyle={Header.containerStyle}
 					>
 						<TitleLine
 							isLoading={isLoading}
@@ -381,14 +373,7 @@ export const Header = ({
 							poster={data?.poster}
 							trailerUrl={data?.trailer}
 							studio={data?.studio}
-							{...css({
-								marginTop: {
-									xs: max(vh(20), px(200)),
-									sm: vh(45),
-									md: max(vh(30), px(150)),
-									lg: max(vh(35), px(200)),
-								},
-							})}
+							{...css(Header.childStyle)}
 						/>
 					</ImageBackground>
 					<Description
@@ -403,3 +388,22 @@ export const Header = ({
 		</Fetch>
 	);
 };
+
+Header.containerStyle = {
+	height: {
+		xs: vh(40),
+		sm: min(vh(60), px(750)),
+		md: min(vh(60), px(680)),
+		lg: vh(70),
+	},
+	minHeight: { xs: px(350), sm: px(300), md: px(400), lg: px(600) },
+};
+
+Header.childStyle = {
+	marginTop: {
+		xs: max(vh(20), px(200)),
+		sm: vh(45),
+		md: max(vh(30), px(150)),
+		lg: max(vh(35), px(200)),
+	},
+};

front/packages/ui/src/details/movie.tsx

@@ -48,7 +48,7 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 				},
 			)}
 		>
-			<Header slug={slug} type="movie" query={query(slug)} />
+			<Header type="movie" query={query(slug)} />
 			{/* <Staff slug={slug} /> */}
 		</ScrollView>
 	);

front/packages/ui/src/details/season.tsx

@@ -104,7 +104,7 @@ export const EpisodeList = <Props,>({
 }: {
 	slug: string;
 	season: string | number;
-	Header: ComponentType<Props & { children: JSX.Element }>;
+	Header: ComponentType<Props & { children: JSX.Element; empty: boolean }>;
 	headerProps: Props;
 }) => {
 	const { t } = useTranslation();

front/packages/ui/src/home/header.tsx

@@ -31,8 +31,9 @@ import {
 	ts,
 } from "@kyoo/primitives";
 import { View } from "react-native";
-import { percent, useYoshiki, vh } from "yoshiki/native";
+import { percent, useYoshiki } from "yoshiki/native";
 import { WithLoading } from "../fetch";
+import { Header as DetailsHeader } from "../details/header";
 import { useTranslation } from "react-i18next";
 import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
 import Info from "@material-symbols/svg-400/rounded/info.svg";
@@ -58,8 +59,15 @@ export const Header = ({
 	const { t } = useTranslation();
 
 	return (
-		<ImageBackground src={thumbnail} alt="" quality="high" {...css({ height: vh(70) }, props)}>
-			<View {...css({ width: percent(70), position: "absolute", bottom: 0, margin: ts(2) })}>
+		<ImageBackground
+			src={thumbnail}
+			alt=""
+			quality="high"
+			{...css(DetailsHeader.containerStyle, props)}
+		>
+			<View
+				{...css({ width: { md: percent(70) }, position: "absolute", bottom: 0, margin: ts(2) })}
+			>
 				<H1>{name}</H1>
 				<View {...css({ flexDirection: "row" })}>
 					<IconFab
@@ -77,7 +85,7 @@ export const Header = ({
 					/>
 					<H2>{tagline}</H2>
 				</View>
-				<P>{overview}</P>
+				<P {...css({ display: { xs: "none", md: "flex" } })}>{overview}</P>
 			</View>
 		</ImageBackground>
 	);

front/packages/ui/src/home/recommanded.tsx

@@ -133,9 +133,9 @@ export const ItemDetails = ({
 						minHeight: px(50),
 					})}
 				>
-					<View {...css({ flexDirection: "row" })}>
-						{genres?.slice(0, 2).map((x) => <Chip key={x} label={x} {...css({ mX: ts(0.5) })} />)}
-					</View>
+					<ScrollView horizontal>
+						{genres?.map((x) => <Chip key={x} label={x} {...css({ mX: ts(0.5) })} />)}
+					</ScrollView>
 					<IconFab
 						icon={PlayArrow}
 						size={20}