From 34f871e62779a77352865dcccba8296eed5b4d67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 21 May 2026 18:30:11 +0200 Subject: [PATCH] Set uniform mobile tab widths within min/max bounds for all tabs --- patterns/card-gruppe-mit-tastennavigation.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html index 7aa843f..16d7f35 100644 --- a/patterns/card-gruppe-mit-tastennavigation.html +++ b/patterns/card-gruppe-mit-tastennavigation.html @@ -139,9 +139,9 @@ 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`); - tab.setAttribute('data-tab-preferred-width', `${preferredWidth}px`); }); }; @@ -149,10 +149,10 @@ 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'); - const preferredWidth = tab.getAttribute('data-tab-preferred-width'); - tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`; + 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'); }