From 98579b726b5cf8127b5b47a0880d958e7db00a61 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Thu, 4 Jun 2026 13:22:30 +0200
Subject: [PATCH 1/3] style(nav): reduce navbar horizontal padding on small
 screens for better alignment

---
 src/features/nav/components/Navbar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 08f5855..6372a7b 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -90,5 +90,8 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     .navbar-search-bar-wrapper-small-screens {
         display: block;
     }
+    .global-nav {
+        padding: 18px 16px;
+    }
 }
 </style>

From 592eb7222fa4bfe17140ceb04e4b40d8a9e8891f Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Thu, 4 Jun 2026 13:38:23 +0200
Subject: [PATCH 2/3] move main content padding CSS variables to the app
 wrapper

---
 src/App.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f128ab6..5044bf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,15 +42,18 @@ watch(colorScheme, val => updateColorScheme(val))
 </template>
 
 <style scoped>
-.main-content {
+#app-wrapper {
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
     --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
+}
+
+.main-content {
     flex-grow: 1;
 }
 
 @media (max-width: 48rem) {
-    .main-content {
+    #app-wrapper {
         --main-content-padding-x: 15px;
     }
 }

From c919263c366ecbaf25bce021f9c49d0346b4115f Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Thu, 4 Jun 2026 13:39:45 +0200
Subject: [PATCH 3/3] feat(navbar-padding): use the responsivity of the main
 content padding CSS variables

---
 src/features/nav/components/Navbar.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 6372a7b..387db51 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -42,7 +42,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 18px 40px;
+    padding: 18px var(--main-content-padding-x);
     height: 42px;
 }
 
@@ -90,8 +90,5 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     .navbar-search-bar-wrapper-small-screens {
         display: block;
     }
-    .global-nav {
-        padding: 18px 16px;
-    }
 }
 </style>