Fix margins with the desktop scaffold

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

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} />

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>
 	);