From 2e74afdff9ee8bdd5439b00c98fdb984af561f3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 16:22:49 +0200
Subject: [PATCH] Adjust portal header mobile row layout

---
 patterns/portal-header.html |  2 +-
 styleguide.css              | 24 ++++++++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index fe88a4f..c03099b 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -18,7 +18,7 @@
     </p>
 
     <p class="sg-table-label sg-text-on-dark">
-      Mobile: gleiche Struktur, ebenfalls volle verfügbare Breite; kein eigener visueller Zustand.
+      Mobile: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
     </p>
 
     <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
diff --git a/styleguide.css b/styleguide.css
index 8591c60..3400f7a 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1377,11 +1377,31 @@ section + section {
 
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header {
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "brand menu"
+      "tabs tabs";
+    align-items: start;
+    row-gap: var(--spacing-small);
+    column-gap: var(--spacing-large);
   }
 
   .sg-portal-header__main {
-    gap: var(--spacing-small);
+    display: contents;
+  }
+
+  .sg-portal-header__brand {
+    grid-area: brand;
+  }
+
+  .sg-portal-header__tabs {
+    grid-area: tabs;
+  }
+
+  .sg-portal-header__menu-wrap {
+    grid-area: menu;
+    justify-self: end;
   }
 }