From 606f0b67d5263466bff1de47f6e2bd8709ae3b7e Mon Sep 17 00:00:00 2001
From: Matthias <matthias@endler.dev>
Date: Sun, 7 Jun 2026 22:39:12 +0200
Subject: [PATCH] Make mobile menu fill full viewport height

On small screens the open menu now spans 100dvh and its items grow to share that space evenly via flex, so the menu always fills the screen with no oversized padding, overflow, or leftover gaps regardless of the number of items.
---
 sass/_base.scss | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/sass/_base.scss b/sass/_base.scss
index 1793d7ce..855f0afe 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -369,11 +369,20 @@ nav {
             top: 0;
             left: 0;
             flex-direction: column;
-            justify-content: center;
+            justify-content: flex-start;
             align-items: center;
             width: 100%;
         }
 
+        // When open, the menu spans the full viewport height and its items
+        // grow to share that space evenly so there is never leftover gap,
+        // regardless of how many items there are. 100dvh accounts for mobile
+        // browser chrome.
+        #menu-toggle:checked ~ .menu {
+            height: 100dvh;
+            background-color: $darkBgrd;
+        }
+
         #menu-toggle ~ .menu li {
             height: 0;
             margin: 0;
@@ -382,6 +391,7 @@ nav {
         }
 
         #menu-toggle:checked ~ .menu li {
+            flex: 1 1 0;
             height: auto;
         }
 
@@ -394,19 +404,25 @@ nav {
         }
 
         .menu > li > a {
-            display: block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             width: 100%;
+            height: 100%;
             text-align: center;
-            padding: 2.4em;
             cursor: pointer;
             color: white;
             border-bottom: 1px solid rgba(white, 0.3);
         }
 
         .cta-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
             background-color: transparent;
             border: none;
-            padding: 2.4em;
             margin: 0;
             border-radius: 0;
             border-bottom: 1px solid rgba(white, 0.3);