📱(frontend) fix few layout issues

For screen between xs and xsm, Dinum typography is creating an overflow on mobile. minHeight 'fit-content' is not working as expected on firefox.
numerique-gouv · Dec 3, 2024 · 91a3aa4 · 91a3aa4
1 parent 05b7436
commit 91a3aa4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 11 deletions.
diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
@@ -13,7 +13,7 @@ export const Join = ({
   const { user } = useUser()
 
   return (
-    <Screen layout="centered">
+    <Screen layout="centered" footer={false}>
       <CenteredContent title={t('join.heading')}>
         <PreJoin
           persistUserChoices

diff --git a/src/frontend/src/features/rooms/routes/Feedback.tsx b/src/frontend/src/features/rooms/routes/Feedback.tsx
@@ -23,7 +23,7 @@ export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
   return (
-    <Screen layout="centered">
+    <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
           <Heading>{t('feedback.heading')}</Heading>

diff --git a/src/frontend/src/layout/Footer.tsx b/src/frontend/src/layout/Footer.tsx
@@ -126,6 +126,7 @@ export const Footer = () => {
       className={css({
         borderTop: '2px solid rgb(0 0 145)',
         paddingY: '2rem',
+        marginTop: { base: '50px', sm: '100px' },
       })}
     >
       <InnerContainer>
@@ -145,20 +146,15 @@ export const Footer = () => {
                 height: '80px',
                 backgroundColor: 'rgb(77 77 77)',
                 width: '1px',
-                display: { base: 'none', xs: 'block' },
+                display: { base: 'none', sm: 'block' },
               })}
             />
             <p
               className={css({
                 display: 'none',
                 fontWeight: '700',
                 fontFamily: 'Marianne',
-                xs: {
-                  display: 'block',
-                  fontSize: '0.75rem',
-                  lineHeight: '1rem',
-                },
-                xsm: {
+                sm: {
                   display: 'block',
                   fontSize: '1rem',
                   lineHeight: '1.5rem',

diff --git a/src/frontend/src/layout/Layout.tsx b/src/frontend/src/layout/Layout.tsx
@@ -22,13 +22,15 @@ export const Layout = ({ children }: { children: ReactNode }) => {
     <>
       <div
         className={css({
-          height: '100%',
           display: 'flex',
-          minHeight: 'fit-content',
           flexDirection: 'column',
           backgroundColor: 'white',
           color: 'default.text',
+          flex: '1',
         })}
+        style={{
+          height: !showFooter ? '100%' : undefined,
+        }}
       >
         {showHeader && <Header />}
         <main