From 28b94ec8a037eab1afd40df7266ef8fb1a6d9247 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:15:29 +0200
Subject: [PATCH] Use active-tab width switching within mobile min/max bounds

---
 patterns/card-gruppe-mit-tastennavigation.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 784212b..4d6e180 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -124,6 +124,8 @@
           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) {
@@ -133,16 +135,24 @@
         tabs.forEach((tab) => {
           const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
           const maxWidth = Math.ceil(currentWidth * 1.4);
-          tab.style.width = `clamp(${currentWidth}px, 33vw, ${maxWidth}px)`;
           tab.style.flex = '0 1 auto';
           tab.style.minWidth = `${currentWidth}px`;
           tab.style.maxWidth = `${maxWidth}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 = tab.getAttribute('data-tab-min-width');
+            const maxWidth = tab.getAttribute('data-tab-max-width');
+            tab.style.width = tab === targetTab ? maxWidth : minWidth;
+          } else {
+            tab.style.removeProperty('width');
+          }
         });
 
         panels.forEach((panel) => {
@@ -170,6 +180,10 @@
       });
 
       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);
     }