responsive css

InseeFr · Apr 11, 2024 · aa2d8f5 · aa2d8f5
1 parent 90e843c
commit aa2d8f5
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/Orchestrator/Navigation.tsx b/src/components/Orchestrator/Navigation.tsx
@@ -6,6 +6,7 @@ import { useMemo, useState, type PropsWithChildren } from 'react'
 import type { OrchestratorProps } from './Orchestrator'
 import { fr } from '@codegouvfr/react-dsfr'
 import type { LunaticOverview } from './utils/lunaticType'
+import { useStyles } from 'tss-react'
 
 export function Navigation(
   props: PropsWithChildren<{
@@ -33,6 +34,8 @@ export function Navigation(
     isSequencePage,
   } = props
 
+  const { cx } = useStyles()
+
   const nextLabel = useMemo(() => {
     switch (currentPage) {
       case 'welcomePage':
@@ -90,10 +93,10 @@ export function Navigation(
       <div className={fr.cx('fr-container')}>
         <div className={fr.cx('fr-grid-row', 'fr-grid-row--center')}>
           <div
-            className={fr.cx(
-              isLayoutExpanded && currentPage === 'lunaticPage'
-                ? 'fr-col-12'
-                : 'fr-col-8'
+            className={cx(
+              fr.cx('fr-col-12'),
+              !(isLayoutExpanded && currentPage === 'lunaticPage') &&
+                fr.cx('fr-col-md-9', 'fr-col-lg-8')
             )}
           >
             {pagination === 'sequence' && currentPage === 'lunaticPage' && (