avoid footer expanding height on tall devices

package-lock.json

@@ -12,7 +12,8 @@
         "next": "15.3.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -6281,6 +6282,16 @@
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.10.tgz",

package.json

@@ -13,7 +13,8 @@
     "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/components/Footer.tsx

@@ -1,11 +1,14 @@
 import { useLanguage } from "@/LanguageContext";
 import { translations } from "@/translations";
+import { twMerge } from "tailwind-merge";
 
-const Footer = () => {
+const Footer = ({ className }: { className?: string }) => {
   const { language } = useLanguage();
   const t = translations[language];
   return (
-    <footer className="bg-background-secondary mt-10 flex flex-col justify-center gap-2 p-10 text-center">
+    <footer
+      className={twMerge("bg-background-secondary flex flex-col justify-center gap-2 p-10 text-center", className)}
+    >
       <p>
         {t.madeBy}{" "}
         <a href="https://furumo.eu" target="_blank">

src/app/components/Header.tsx

@@ -6,7 +6,7 @@ const Header = () => {
   const t = translations[language];
   return (
     <header>
-      <h1 className="text-center text-4xl font-bold">
+      <h1 className="mb-12 text-center text-4xl font-bold">
         {t.appTitle.split(" ")[0]} 100 <span className="border-norway border-b-2">{t.norwegians}</span>
       </h1>
     </header>

src/app/page.tsx

@@ -97,13 +97,13 @@ function Home() {
   };
 
   return (
-    <div className="grid min-h-dvh grid-rows-[auto,1fr,auto] gap-12 pt-15">
+    <div className="grid min-h-dvh grid-rows-[auto,1fr,auto] pt-15">
       <div className="absolute top-4 right-4 z-50 flex items-center gap-2">
         <LanguageMenu />
         <HowToPlayButton onClick={() => setHowToPlayOpen(true)} ariaLabel={t.howToPlayTitle} />
       </div>
       <Header />
-      <main className="row-start-2 flex w-full flex-1 flex-col items-center gap-6 px-4">
+      <main className="row-start-2 flex w-full flex-1 flex-col items-center gap-6 px-4 pb-12">
         {timerStarted && (
           <div className="flex gap-4">
             <RestartButton onClick={handleRestart} />
@@ -128,7 +128,7 @@ function Home() {
           </>
         )}
       </main>
-      <Footer />
+      <Footer className="self-end" />
       <HowToPlay open={howToPlayOpen} onClose={() => setHowToPlayOpen(false)} />
     </div>
   );