From e2eb0fd4aabf4287c879a9e5efecb616ec363c48 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:06:07 +0200
Subject: [PATCH] Make mobile tab widths clamp between current and
 plus-40-percent

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

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 5080a96..784212b 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -120,6 +120,8 @@
 
       const applyMobileTabWidthBounds = () => {
         tabs.forEach((tab) => {
+          tab.style.removeProperty('width');
+          tab.style.removeProperty('flex');
           tab.style.removeProperty('min-width');
           tab.style.removeProperty('max-width');
         });
@@ -130,8 +132,11 @@
 
         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 = `${Math.ceil(currentWidth * 1.4)}px`;
+          tab.style.maxWidth = `${maxWidth}px`;
         });
       };