From 5669cda42c373a4f4f8295051acf4aebdd47a493 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:26:27 +0200
Subject: [PATCH] Fix portal header mobile layout without display contents

---
 patterns/portal-header.html | 60 ++++++++++++++++++-------------------
 styleguide.css              | 10 ++-----
 2 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index c03099b..6333024 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -30,6 +30,21 @@
         <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
           <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
 
+          <div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
+            <button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
+              <span class="sg-sandwich-button__icon" aria-hidden="true">
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+              </span>
+            </button>
+
+            <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
+              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
+              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+            </div>
+          </div>
+
           <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
@@ -37,21 +52,6 @@
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
           </nav>
         </div>
-
-        <div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
-          <button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
-            <span class="sg-sandwich-button__icon" aria-hidden="true">
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-            </span>
-          </button>
-
-          <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
-          </div>
-        </div>
       </header>
 
       <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
@@ -68,6 +68,21 @@
         <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
           <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
 
+          <div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
+            <button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
+              <span class="sg-sandwich-button__icon" aria-hidden="true">
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+              </span>
+            </button>
+
+            <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
+              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
+              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+            </div>
+          </div>
+
           <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
@@ -75,21 +90,6 @@
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
           </nav>
         </div>
-
-        <div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
-          <button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
-            <span class="sg-sandwich-button__icon" aria-hidden="true">
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-            </span>
-          </button>
-
-          <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
-          </div>
-        </div>
       </header>
 
       <div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
diff --git a/styleguide.css b/styleguide.css
index 3400f7a..1445429 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1376,19 +1376,13 @@ section + section {
 }
 
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
-  .sg-portal-header {
+  .sg-portal-header__main {
     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 {
-    display: contents;
+    gap: var(--spacing-small) var(--spacing-large);
   }
 
   .sg-portal-header__brand {