From 16a4985ccaa5906f9e5edb9cad670d3c05f6cf77 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Fri, 7 Jul 2023 12:03:39 +0200
Subject: [PATCH] Layout perfection

---
 app/[lang]/components/TestableLayout.tsx | 2 +-
 app/[lang]/contactez-nous/page.tsx       | 2 +-
 app/[lang]/page.tsx                      | 2 +-
 app/[lang]/qui-sommes-nous/page.tsx      | 2 +-
 tailwind.config.js                       | 5 ++++-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/[lang]/components/TestableLayout.tsx b/app/[lang]/components/TestableLayout.tsx
index 6b2c4d9..e2f1abb 100644
--- a/app/[lang]/components/TestableLayout.tsx
+++ b/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>
diff --git a/app/[lang]/contactez-nous/page.tsx b/app/[lang]/contactez-nous/page.tsx
index 8b51f60..242fa58 100644
--- a/app/[lang]/contactez-nous/page.tsx
+++ b/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"
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
index 94a1593..3666e6a 100644
--- a/app/[lang]/page.tsx
+++ b/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}
diff --git a/app/[lang]/qui-sommes-nous/page.tsx b/app/[lang]/qui-sommes-nous/page.tsx
index b5fafca..a3eee66 100644
--- a/app/[lang]/qui-sommes-nous/page.tsx
+++ b/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"
diff --git a/tailwind.config.js b/tailwind.config.js
index 4acee19..90c2043 100644
--- a/tailwind.config.js
+++ b/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)'],
       }
     }
   },