From f0debe844d879234b522a7c4285b6a6650adc70a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 18:32:34 +0200
Subject: [PATCH] Make mobile tab row fill width and wrap only at intrinsic
 minimum

---
 .../card-gruppe-mit-tastennavigation.html     | 44 -------------------
 styleguide.css                                |  7 +++
 2 files changed, 7 insertions(+), 44 deletions(-)

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 16d7f35..03bf4ce 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -116,46 +116,10 @@
     if (tabGroup) {
       const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
       const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
-      const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
-
-      const applyMobileTabWidthBounds = () => {
-        tabs.forEach((tab) => {
-          tab.style.removeProperty('width');
-          tab.style.removeProperty('flex');
-          tab.style.removeProperty('min-width');
-          tab.style.removeProperty('max-width');
-          tab.removeAttribute('data-tab-min-width');
-          tab.removeAttribute('data-tab-max-width');
-        });
-
-        if (!mobileBreakpoint.matches) {
-          return;
-        }
-
-        tabs.forEach((tab) => {
-          const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
-          const maxWidth = Math.ceil(currentWidth * 1.4);
-          const preferredWidth = Math.ceil(currentWidth * 1.2);
-          tab.style.flex = '0 1 auto';
-          tab.style.minWidth = `${currentWidth}px`;
-          tab.style.maxWidth = `${maxWidth}px`;
-          tab.style.width = `${preferredWidth}px`;
-          tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
-          tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
-        });
-      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
           tab.setAttribute('aria-selected', String(tab === targetTab));
-          if (mobileBreakpoint.matches) {
-            const minWidth = Number((tab.getAttribute('data-tab-min-width') || '').replace('px', ''));
-            const maxWidth = Number((tab.getAttribute('data-tab-max-width') || '').replace('px', ''));
-            const preferredWidth = Math.ceil(minWidth + ((maxWidth - minWidth) * 0.5));
-            tab.style.width = `${preferredWidth}px`;
-          } else {
-            tab.style.removeProperty('width');
-          }
         });
 
         panels.forEach((panel) => {
@@ -181,14 +145,6 @@
           activateTab(nextTab);
         });
       });
-
-      applyMobileTabWidthBounds();
-      const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
-      if (activeTab) {
-        activateTab(activeTab);
-      }
-      mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
-      window.addEventListener('resize', applyMobileTabWidthBounds);
     }
   </script>
 
diff --git a/styleguide.css b/styleguide.css
index 0ed8529..f4bb6c4 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2283,6 +2283,13 @@ section + section {
   margin: 0;
 }
 
+@media (max-width: 767px) {
+  .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
+    flex: 1 1 0;
+    min-width: max-content;
+  }
+}
+
 /* ========================================================= */
 /* Components: Cards                                         */
 /* ========================================================= */