From e61ec9a4921a1cd27f4d17a2900f762ee58771f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 09:14:51 +0200
Subject: [PATCH] Fix mobile tab row balancing in keyboard-nav pattern

---
 .../card-gruppe-mit-tastennavigation.html     | 91 +++++++++++++++++++
 .../32-patterns-card-group-keyboard-nav.css   |  9 +-
 2 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 03bf4ce..fe7b369 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -17,6 +17,10 @@
         <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="content-block-card-1" id="content-block-tab-1" data-component-part="tab-button">Taste 1</button>
         <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-2" id="content-block-tab-2" data-component-part="tab-button">Taste 2</button>
         <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-3" id="content-block-tab-3" data-component-part="tab-button">Taste 3</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-4" id="content-block-tab-4" data-component-part="tab-button">Taste 4</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-5" id="content-block-tab-5" data-component-part="tab-button">Taste 5</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-6" id="content-block-tab-6" data-component-part="tab-button">Taste 6</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-7" id="content-block-tab-7" data-component-part="tab-button">Taste 7</button>
       </div>
 
       <div class="sg-content-block-card-group__panels">
@@ -106,6 +110,58 @@
             </article>
           </div>
         </div>
+
+        <div class="sg-content-block-card-group__panel" id="content-block-card-4" role="tabpanel" aria-labelledby="content-block-tab-4" hidden>
+          <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 4">
+            <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 4.1">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Card 4.1</div>
+              </div>
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <p class="sg-body">Inhalt für Taste 4.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div class="sg-content-block-card-group__panel" id="content-block-card-5" role="tabpanel" aria-labelledby="content-block-tab-5" hidden>
+          <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 5">
+            <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 5.1">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Card 5.1</div>
+              </div>
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <p class="sg-body">Inhalt für Taste 5.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div class="sg-content-block-card-group__panel" id="content-block-card-6" role="tabpanel" aria-labelledby="content-block-tab-6" hidden>
+          <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 6">
+            <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 6.1">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Card 6.1</div>
+              </div>
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <p class="sg-body">Inhalt für Taste 6.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div class="sg-content-block-card-group__panel" id="content-block-card-7" role="tabpanel" aria-labelledby="content-block-tab-7" hidden>
+          <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 7">
+            <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 7.1">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Card 7.1</div>
+              </div>
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <p class="sg-body">Inhalt für Taste 7.</p>
+              </div>
+            </article>
+          </div>
+        </div>
       </div>
     </div>
   </section>
@@ -116,6 +172,38 @@
     if (tabGroup) {
       const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
       const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
+      const tabList = tabGroup.querySelector('[role="tablist"]');
+
+      const applyMobileBalancedTabRows = () => {
+        if (!tabList) {
+          return;
+        }
+
+        tabs.forEach((tab) => {
+          tab.style.removeProperty('--sg-tab-mobile-row-slots');
+        });
+
+        if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
+          return;
+        }
+
+        const maxItemsPerRow = 3;
+        const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
+        const baseRowSize = Math.floor(tabs.length / rowCount);
+        const rowRemainder = tabs.length % rowCount;
+        let tabStartIndex = 0;
+
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+          const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
+          for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
+            const tab = tabs[tabStartIndex + itemOffset];
+            if (tab) {
+              tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
+            }
+          }
+          tabStartIndex += rowSize;
+        }
+      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
@@ -145,6 +233,9 @@
           activateTab(nextTab);
         });
       });
+
+      applyMobileBalancedTabRows();
+      window.addEventListener('resize', applyMobileBalancedTabRows);
     }
   </script>
 
diff --git a/styles/32-patterns-card-group-keyboard-nav.css b/styles/32-patterns-card-group-keyboard-nav.css
index c3ba317..6f9c6a7 100644
--- a/styles/32-patterns-card-group-keyboard-nav.css
+++ b/styles/32-patterns-card-group-keyboard-nav.css
@@ -37,8 +37,13 @@
 
 @media (max-width: 767px) {
   .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
-    flex: 1 1 0;
+    flex: 0 0 calc(
+      (
+        100%
+        - (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
+      )
+      / var(--sg-tab-mobile-row-slots, 1)
+    );
     min-width: max-content;
   }
 }
-