From c7517c65b40343f87d0e73ebdfa80a8a3d3c8a81 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:28:47 +0200
Subject: [PATCH] Apply mobile width bounds to inactive tabs with preferred
 width

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

diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 4d6e180..7aa843f 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -135,11 +135,13 @@
         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.setAttribute('data-tab-min-width', `${currentWidth}px`);
           tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
+          tab.setAttribute('data-tab-preferred-width', `${preferredWidth}px`);
         });
       };
 
@@ -149,7 +151,8 @@
           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;
+            const preferredWidth = tab.getAttribute('data-tab-preferred-width');
+            tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`;
           } else {
             tab.style.removeProperty('width');
           }