From cfc72b8bc1078b775969cf1d7906adfd5402d79a Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 6 Jan 2024 16:11:26 +0100
Subject: [PATCH] Fix margins with the desktop scaffold

---
 front/Dockerfile.dev                      |  2 +-
 front/Navigation.tsx                      |  5 +---
 front/components/UI/ScaffoldDesktopCC.tsx | 30 +++++++++++------------
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/front/Dockerfile.dev b/front/Dockerfile.dev
index 23f4382..5646a7f 100644
--- a/front/Dockerfile.dev
+++ b/front/Dockerfile.dev
@@ -4,4 +4,4 @@ WORKDIR /app
 RUN yarn global add npx expo-cli
 
 ENV DEVAPIURL http://back:3000
-CMD npx expo start
+CMD npx expo start --web
diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index db136c6..3b1bad3 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -187,10 +187,7 @@ const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
 			<LinearGradient
 				colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', '#cdd4fd']}
 				style={{
-					width: '100%',
-					height: '100%',
-					position: 'absolute',
-					zIndex: -2,
+					flex: 1,
 				}}
 			>
 				<Component {...(props.route.params as T)} route={props.route} />
diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx
index c2b62af..b366258 100644
--- a/front/components/UI/ScaffoldDesktopCC.tsx
+++ b/front/components/UI/ScaffoldDesktopCC.tsx
@@ -231,22 +231,20 @@ const ScaffoldDesktopCC = ({
 					/>
 				</View>
 			</View>
-			<ScrollView style={{ flex: 1, maxHeight: '100%' }} contentContainerStyle={{ flex: 1 }}>
-				<View
-					style={{
-						backgroundColor: colors.coolGray[500],
-						flex: 1,
-						margin: 8,
-						marginBottom: 0,
-						marginLeft: 0,
-						padding: 20,
-						borderRadius: 12,
-						minHeight: 'auto',
-					}}
-				>
-					{children}
-				</View>
-				<Spacer height="xs" />
+			<ScrollView
+				style={{ flex: 1, maxHeight: '100%' }}
+				contentContainerStyle={{
+					flex: 1,
+					backgroundColor: colors.coolGray[500],
+					margin: 8,
+					padding: 20,
+					borderRadius: 12,
+					// Become the same height as the child so if the child has overflow: auto, the child's scrollbar
+					// is hidden and we use this component's scrollbar.
+					minHeight: "auto"
+				}}
+			>
+				{children}
 			</ScrollView>
 		</View>
 	);