adapt layout

src/components/Orchestrator/CustomPages/EndPage.tsx

@@ -1,14 +1,16 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
 export function EndPage(props: { date: number | undefined }) {
   const { date = Date.now() } = props
   const formatedData = new Date(date).toLocaleString()
   return (
-    <>
+    <div className={fr.cx('fr-my-4w')}>
       <h1>L’Insee vous remercie pour votre collaboration à cette enquête.</h1>
       <p>Vos réponses ont été envoyées le {formatedData}.</p>
       <p>
         Si vous avez indiqué une adresse électronique, un accusé de réception
         vous sera envoyé automatiquement.{' '}
       </p>
-    </>
+    </div>
   )
 }

src/components/Orchestrator/CustomPages/Validation.tsx

@@ -1,11 +1,13 @@
+import { fr } from "@codegouvfr/react-dsfr";
+
 export function Validation() {
   return (
-    <>
+    <div className={fr.cx('fr-my-4w')}>
       <h1>Vous êtes arrivé à la fin du questionnaire</h1>
       <p>
         Après envoi, vous ne pourrez plus modifier vos réponses et vous pourrez
         télécharger un accusé de réception.
       </p>
-    </>
+    </div>
   )
 }

src/components/Orchestrator/CustomPages/Welcome.tsx

@@ -20,7 +20,7 @@ export function Welcome(props: {
 
   return (
     <>
-      <div className={fr.cx('fr-mb-1w')}>
+      <div className={fr.cx('fr-my-4w')}>
         <h1>Bienvenue sur le questionnaire de votre enquête</h1>
         <p className={fr.cx('fr-text--lead')}>
           Cette enquête permet de connaître plus d'informations sur le domaine

src/components/Orchestrator/Navigation.tsx

@@ -63,8 +63,16 @@ export function Navigation(
   return (
     <>
       {!isPreviousButtonDisplayed && (
-        <div className={fr.cx('fr-grid-row')}>
+        <div className={fr.cx('fr-grid-row', 'fr-mt-1w')}>
           <div className={fr.cx('fr-container')}>
+            {displaySequenceSteeper && (
+              <Stepper
+                currentStep={currentSequence.index}
+                stepCount={overview.length}
+                title={currentSequence.element.label}
+                className={fr.cx('fr-mx-1w')}
+              />
+            )}
             <Button
               id="button-precedent"
               title="Revenir à l'étape précédente"
@@ -75,31 +83,29 @@ export function Navigation(
             >
               Précédent
             </Button>
-            {displaySequenceSteeper && (
-              <Stepper
-                currentStep={currentSequence.index}
-                stepCount={overview.length}
-                title={currentSequence.element.label}
-                className={fr.cx('fr-mx-1w')}
-              />
-            )}
           </div>
         </div>
       )}
 
       <div className={fr.cx('fr-container')}>
         <div className={fr.cx('fr-grid-row', 'fr-grid-row--center')}>
-          <div className={fr.cx(isLayoutExpanded ? 'fr-col-12' : 'fr-col-8')}>
-            <div style={{ justifyContent: 'flex-end', textAlign: 'right' }}>
-              {pagination === 'sequence' && currentPage === 'lunaticPage' && (
+          <div
+            className={fr.cx(
+              isLayoutExpanded && currentPage === 'lunaticPage'
+                ? 'fr-col-12'
+                : 'fr-col-8'
+            )}
+          >
+            {pagination === 'sequence' && currentPage === 'lunaticPage' && (
+              <div style={{ justifyContent: 'flex-end', textAlign: 'right' }}>
                 <Button
                   iconId="ri-expand-diagonal-line"
                   priority="tertiary no outline"
                   onClick={() => setIsLayoutExpanded((expanded) => !expanded)}
                   title="Étendre la vue"
                 />
-              )}
-            </div>
+              </div>
+            )}
             {children}
             <Button
               priority="primary"
@@ -113,24 +119,24 @@ export function Navigation(
             >
               {nextLabel}
             </Button>
+            {mode === 'visualize' && (
+              <ButtonsGroup
+                buttons={[
+                  {
+                    children: 'Télécharger les données',
+                    priority: 'tertiary no outline',
+                    id: 'button-saveData',
+                    iconId: 'ri-download-2-line',
+                    onClick: handleDownloadData,
+                  },
+                ]}
+                alignment="right"
+                buttonsEquisized={true}
+              />
+            )}
           </div>
         </div>
       </div>
-      {mode === 'visualize' && (
-        <ButtonsGroup
-          buttons={[
-            {
-              children: 'Télécharger les données',
-              priority: 'tertiary no outline',
-              id: 'button-saveData',
-              iconId: 'ri-download-2-line',
-              onClick: handleDownloadData,
-            },
-          ]}
-          alignment="right"
-          buttonsEquisized={true}
-        />
-      )}
     </>
   )
 }