From 50ed57c6a2becb4fc04c653612e7966262916dae Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Mon, 16 Mar 2026 14:02:38 +0200
Subject: [PATCH] Improved header shrinking on small screens

---
 src/components/AppHeader.ts | 16 +++++++++-------
 src/components/AppRoot.ts   |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index cd7d0c2..7e78564 100644
--- a/src/components/AppHeader.ts
+++ b/src/components/AppHeader.ts
@@ -26,19 +26,21 @@ export class AppHeader extends Component {
     return html`
       <header
         role="banner"
-        class="group/header flex items-center justify-between border-b border-white/5 px-4 py-4 transition-colors has-open:bg-neutral-900 sm:px-0 sm:py-16"
+        class="group/header flex items-center justify-between gap-2 border-white/5 p-4 transition-colors has-open:bg-neutral-900 sm:px-0 sm:py-16"
       >
         <a
           href="${logoHref}"
           class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
         >
-          <img src="https://wsrv.nl?url=${window.encodeURIComponent(
-            this.logoUrl,
-          )}" alt="${this.logoAlt}" class="h-8" />
+          <img
+            src="https://wsrv.nl?url=${window.encodeURIComponent(this.logoUrl)}"
+            alt="${this.logoAlt}"
+            class="max-h-8"
+          />
         </a>
         <nav
           aria-label="Desktop navigation"
-          class="flex items-center gap-2"
+          class="flex shrink-0 items-center gap-2"
         >
           ${this.links.map((link) =>
             html`
@@ -77,11 +79,11 @@ export class AppHeader extends Component {
           </button>
         </nav>
         <div
-          class="absolute inset-x-0 top-16 z-50 grid w-full grid-rows-[0fr] border-b border-b-white/5 bg-neutral-900 shadow-md transition-all transition-discrete ease-out open:grid-rows-[1fr] sm:hidden starting:open:grid-rows-[0fr]"
+          class="absolute inset-x-0 top-18 z-50 grid w-full grid-rows-[0fr] border-b border-b-white/5 bg-neutral-900 shadow-md transition-all transition-discrete ease-out open:grid-rows-[1fr] sm:hidden starting:open:grid-rows-[0fr]"
           popover
           id="menu"
         >
-          <nav aria-label="Mobile navigation" class="py-2 overflow-hidden">
+          <nav aria-label="Mobile navigation" class="pb-2 overflow-hidden">
             ${this.links.map((link) =>
               html`
                 <a
diff --git a/src/components/AppRoot.ts b/src/components/AppRoot.ts
index 9cf7b17..69bbd49 100644
--- a/src/components/AppRoot.ts
+++ b/src/components/AppRoot.ts
@@ -108,7 +108,7 @@ export class AppRoot extends Component {
             class="ring-white/5 ring-inset sm:rounded-2xl sm:bg-neutral-900 sm:ring-1"
           >
             ${new StatusOverview(this.site.mainStatus, this.services)}
-            <div class="p-6 pt-0! md:p-8">
+            <div class="p-4 pt-0! sm:p-6 md:p-8">
               ${this.page}
             </div>
           </main>