From 91a3aa40339d831d5fb071d653309f76f207ad82 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 3 Dec 2024 01:27:43 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20fix=20few=20layout=20i?=
 =?UTF-8?q?ssues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For screen between xs and xsm, Dinum typography is creating
an overflow on mobile.

minHeight 'fit-content' is not working as expected on firefox.
---
 src/frontend/src/features/rooms/components/Join.tsx |  2 +-
 src/frontend/src/features/rooms/routes/Feedback.tsx |  2 +-
 src/frontend/src/layout/Footer.tsx                  | 10 +++-------
 src/frontend/src/layout/Layout.tsx                  |  6 ++++--
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index 310ac8d6..e52bf610 100644
--- 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
index 549bf13a..9cef5184 100644
--- 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
index 25c61aac..95d128ec 100644
--- 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,7 +146,7 @@ export const Footer = () => {
                 height: '80px',
                 backgroundColor: 'rgb(77 77 77)',
                 width: '1px',
-                display: { base: 'none', xs: 'block' },
+                display: { base: 'none', sm: 'block' },
               })}
             />
             <p
@@ -153,12 +154,7 @@ export const Footer = () => {
                 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
index e8274b18..8fd51920 100644
--- 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