fix: 🐛 Corrige les problèmes d'affichage sur tablette (#566)

front/constants/platform.constants.ts

@@ -3,9 +3,16 @@ import { Dimensions, Platform } from "react-native";
 export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
   Dimensions.get("window");
 
+const MAX_TABLET_RATIO = 1.6;
+const IS_TABLET = SCREEN_HEIGHT / SCREEN_WIDTH < MAX_TABLET_RATIO;
+
 // Based on iPhone 6's scale : 375 x 667
 const IPHONE6_WIDTH_SCALE = 375;
-export const SCREEN_SCALE = SCREEN_WIDTH / IPHONE6_WIDTH_SCALE;
+// Based on iPad : 768 x 1024
+const IPAD_AIR_WIDTH_SCALE = 768;
+
+export const SCREEN_SCALE =
+  SCREEN_WIDTH / (IS_TABLET ? IPAD_AIR_WIDTH_SCALE : IPHONE6_WIDTH_SCALE);
 export const PLATFORM_IS_IOS = Platform.OS === "ios";
 export const PLATFORM_IS_ANDROID = Platform.OS === "android";
 export const MAJOR_VERSION_IOS = parseInt(Platform.Version.toString(), 10);

front/constants/spacings.ts

 import { scaleNormalize } from "../utils/scaleNormalize.util";
-import { SCREEN_WIDTH } from "./platform.constants";
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 export const Margins = {
@@ -13,7 +12,6 @@ export const Margins = {
   evenMoreLargest: scaleNormalize(50),
   step: scaleNormalize(60),
   snackbarMargin: scaleNormalize(80),
-  epdsResultLeftMargin: SCREEN_WIDTH / 8,
 };
 
 export const Paddings = {

front/screens/epdsSurvey/epdsLightResult.component.tsx

@@ -196,6 +196,7 @@ const styles = StyleSheet.create({
   },
   validateButton: {
     alignItems: "center",
+    paddingTop: Paddings.light,
   },
 });
 

front/screens/epdsSurvey/epdsResultInformation/epdsResultContactParagraph.component.tsx

@@ -30,7 +30,7 @@ const EpdsResultContactParagraph: React.FC<EpdsResultContactParagraphProps> = ({
 
   const titleStyle = [styles.contactName, { fontSize: Sizes.sm }];
   return (
-    <View style={[styles.itemBorder, styles.marginLeft]}>
+    <View style={styles.itemBorder}>
       {paragraphTitle && paragraphTitle.length > 0 && (
         <SecondaryText style={titleStyle}>{paragraphTitle}</SecondaryText>
       )}
@@ -98,9 +98,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     paddingRight: Paddings.smaller,
   },
-  marginLeft: {
-    marginLeft: -Margins.epdsResultLeftMargin,
-  },
   paddingVertical: {
     paddingVertical: Paddings.default,
   },

front/screens/epdsSurvey/epdsResultInformation/epdsResultInformation.component.tsx

@@ -41,7 +41,9 @@ const EpdsResultInformation: React.FC<EpdsResultInformationProps> = ({
   const renderParagraphs = (paragraphs: EpdsResultInformationType[]) => {
     return paragraphs.map(
       (paragraph: EpdsResultInformationType, index: number) => (
-        <View key={index}>{renderParagraph(paragraph)}</View>
+        <View key={index} style={styles.accordionItem}>
+          {renderParagraph(paragraph)}
+        </View>
       )
     );
   };
@@ -113,6 +115,10 @@ const styles = StyleSheet.create({
   accordion: {
     backgroundColor: Colors.cardWhite,
   },
+  accordionItem: {
+    paddingLeft: Paddings.light,
+    paddingRight: Paddings.smaller,
+  },
   card: {
     borderColor: Colors.cardGrey,
     borderStartWidth: Margins.smaller,

front/screens/epdsSurvey/epdsResultInformation/epdsResultSimpleParagraph.component.tsx

@@ -71,8 +71,6 @@ const styles = StyleSheet.create({
   itemBorder: {
     borderBottomColor: Colors.disabled,
     borderBottomWidth: 1,
-    marginLeft: -Margins.epdsResultLeftMargin,
-    marginRight: Margins.smaller,
     paddingVertical: Paddings.smaller,
   },
   paragraphDescription: {

front/screens/epdsSurvey/epdsResultInformation/epdsResultUrlParagraph.component.tsx

@@ -42,8 +42,6 @@ const styles = StyleSheet.create({
   itemBorder: {
     borderBottomColor: Colors.disabled,
     borderBottomWidth: 1,
-    marginLeft: -Margins.epdsResultLeftMargin,
-    marginRight: Margins.smaller,
     marginVertical: Margins.smaller,
   },
   paragraphTitle: {