Layout perfection

app/[lang]/components/TestableLayout.tsx

@@ -19,7 +19,7 @@ const TestableLayout = ({
     <NextIntlClientProvider locale={locale} messages={messages}>
       <div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
         <Navbar />
-        <div className="relative h-content overflow-scroll">{children}</div>
+        <div className="relative min-h-content overflow-scroll">{children}</div>
         <Footer />
       </div>
     </NextIntlClientProvider>

app/[lang]/contactez-nous/page.tsx

@@ -6,7 +6,7 @@ export default function Contact() {
   const t = useTranslations("Contact");
 
   return (
-    <section className="grid place-items-center bg-white dark:bg-gray-800">
+    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
       <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
         <h2
           className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"

app/[lang]/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
   const t = useTranslations("Home");
 
   return (
-    <header className="relative flex h-full items-center justify-center">
+    <header className="relative flex h-content items-center justify-center">
       <div className="absolute h-full w-full brightness-[0.2]">
         <Image
           src={bgImage}

app/[lang]/qui-sommes-nous/page.tsx

@@ -5,7 +5,7 @@ export default function About() {
   const t = useTranslations("About");
 
   return (
-    <section className="grid place-items-center bg-white dark:bg-gray-800">
+    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
       <div className="max-w-5xl px-4 py-8 lg:py-16">
         <h2
           className="mb-8 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"

tailwind.config.js

@@ -8,10 +8,13 @@ module.exports = {
   ],
   theme: {
     extend: {
-      height: {
+      minHeight: {
         // We use 100svh, falling back to vh for old browsers
         // The 144px is for the header and footer
         content: ['calc(100vh - 144px)', 'calc(100svh - 144px)'],
+      },
+      height: {
+        content: ['calc(100vh - 144px)', 'calc(100svh - 144px)'],
       }
     }
   },