From 736c4336796016db349eebe6252d717e4beac6a3 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:04:36 +0200
Subject: [PATCH] Adjust mobile tab button min/max widths in card group pattern

---
 .../card-gruppe-mit-tastennavigation.html     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 03bf4ce..5080a96 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -116,6 +116,24 @@
     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('min-width');
+          tab.style.removeProperty('max-width');
+        });
+
+        if (!mobileBreakpoint.matches) {
+          return;
+        }
+
+        tabs.forEach((tab) => {
+          const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
+          tab.style.minWidth = `${currentWidth}px`;
+          tab.style.maxWidth = `${Math.ceil(currentWidth * 1.4)}px`;
+        });
+      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
@@ -145,6 +163,10 @@
           activateTab(nextTab);
         });
       });
+
+      applyMobileTabWidthBounds();
+      mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
+      window.addEventListener('resize', applyMobileTabWidthBounds);
     }
   </script>