From e5a52d0f9498744a03a09ff199de43a70ce0f55f Mon Sep 17 00:00:00 2001
From: mathysPaul <mathys.paul@epitech.eu>
Date: Wed, 20 Sep 2023 18:34:20 +0200
Subject: [PATCH] fix checkbox Profile off-screen

---
 front/components/ScoreGraph.tsx | 41 ++++++++++++++++++---------------
 front/views/ProfileView.tsx     |  2 +-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/front/components/ScoreGraph.tsx b/front/components/ScoreGraph.tsx
index f371801..1f58779 100644
--- a/front/components/ScoreGraph.tsx
+++ b/front/components/ScoreGraph.tsx
@@ -6,8 +6,8 @@ import {
 	useBreakpointValue,
 	useTheme,
 	Text,
-	ScrollView,
 	View,
+	Wrap,
 } from 'native-base';
 import { LineChart } from 'react-native-chart-kit';
 import SongHistory from '../models/SongHistory';
@@ -153,10 +153,10 @@ const ScoreGraph = (props: ScoreGraphProps) => {
 					alignItems: 'center',
 				}}
 			>
-				<Text>Skils</Text>
-				<ScrollView horizontal={true}>
+				<Text style={{ padding: 10 }}>Skils</Text>
+				<Wrap style={{ flexDirection: 'row', maxWidth: '100%', flex: 1 }}>
 					{skills.map((skill) => (
-						<View key={skill.value} style={{ paddingLeft: 20 }}>
+						<View key={skill.value} style={{ padding: 10 }}>
 							<CheckboxBase
 								title={skill.title}
 								value={skill.value}
@@ -165,20 +165,25 @@ const ScoreGraph = (props: ScoreGraphProps) => {
 							/>
 						</View>
 					))}
-				</ScrollView>
-				<Select
-					selectedValue={selectedRange}
-					onValueChange={(itemValue) => setSelectedRange(itemValue)}
-					defaultValue={'3days'}
-					bgColor={'rgba(16,16,20,0.5)'}
-					variant="filled"
-					style={{ display: 'flex', justifyContent: 'center' }}
-					width={layout.width > 650 ? '200' : '100'}
-				>
-					{rangeOptions.map((option) => (
-						<Select.Item key={option.label} label={option.label} value={option.value} />
-					))}
-				</Select>
+					<Box style={{ padding: 10 }}>
+						<Select
+							selectedValue={selectedRange}
+							onValueChange={(itemValue) => setSelectedRange(itemValue)}
+							defaultValue={'3days'}
+							bgColor={'rgba(16,16,20,0.5)'}
+							variant="filled"
+							width={layout.width > 650 ? '200' : '150'}
+						>
+							{rangeOptions.map((option) => (
+								<Select.Item
+									key={option.label}
+									label={option.label}
+									value={option.value}
+								/>
+							))}
+						</Select>
+					</Box>
+				</Wrap>
 			</Row>
 			<Box
 				style={{ width: '100%', marginTop: 20 }}
diff --git a/front/views/ProfileView.tsx b/front/views/ProfileView.tsx
index 2cafe44..54ec75f 100644
--- a/front/views/ProfileView.tsx
+++ b/front/views/ProfileView.tsx
@@ -809,7 +809,7 @@ const ProfileView = () => {
 					right: 0,
 					left: 0,
 					width: '100%',
-					height: '100%',
+					height: '180%', // TODO Need to fixe the background
 					margin: 0,
 					padding: 0,
 					position: 'absolute',