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`; }); };