From 86533153bfa1822a3692bd10769ca5100f3783c6 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 6 Jun 2023 15:41:51 +0900
Subject: [PATCH] Allow the login page to be scrolled

---
 front/packages/ui/src/login/form.tsx | 26 +++++++-------------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/front/packages/ui/src/login/form.tsx b/front/packages/ui/src/login/form.tsx
index e862b484..99ecbada 100644
--- a/front/packages/ui/src/login/form.tsx
+++ b/front/packages/ui/src/login/form.tsx
@@ -20,7 +20,7 @@
 
 import { ts } from "@kyoo/primitives";
 import { ReactNode } from "react";
-import { ImageBackground, ImageProps, Platform, View } from "react-native";
+import { ScrollView, ImageBackground, ImageProps, Platform, View } from "react-native";
 import Svg, { SvgProps, Path } from "react-native-svg";
 import { min, percent, px, Stylable, useYoshiki, vh, vw } from "yoshiki/native";
 
@@ -28,7 +28,7 @@ const SvgBlob = (props: SvgProps) => {
 	const { css, theme } = useYoshiki();
 
 	return (
-		<View {...css({ width: percent(100), aspectRatio: 5 / 6 }, props)}>
+		<View {...css({ width: min(vh(90), px(1200)), aspectRatio: 5 / 6 }, props)}>
 			<Svg width="100%" height="100%" viewBox="0 0 500 600">
 				<Path
 					d="M459.7 0c-20.2 43.3-40.3 86.6-51.7 132.6-11.3 45.9-13.9 94.6-36.1 137.6-22.2 43-64.1 80.3-111.5 88.2s-100.2-13.7-144.5-1.8C71.6 368.6 35.8 414.2 0 459.7V0h459.7z"
@@ -61,26 +61,14 @@ export const FormPage = ({ children, ...props }: { children: ReactNode } & Styla
 				backgroundColor: (theme) => theme.dark.background,
 			})}
 		>
-			<View
+			<SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} />
+			<ScrollView
 				{...css({
-					width: min(vh(90), px(1200)),
-					height: min(vh(90), px(1200)),
+					paddingHorizontal: ts(3),
 				})}
 			>
-				<SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} />
-				<View
-					{...css(
-						{
-							width: percent(75),
-							paddingHorizontal: ts(3),
-							maxWidth: vw(100),
-						},
-						props,
-					)}
-				>
-					{children}
-				</View>
-			</View>
+				<View {...css({ maxWidth: px(600) }, props)}>{children}</View>
+			</ScrollView>
 		</ImageBackground>
 	);
 };