Make mobile tab row fill width and wrap only at intrinsic minimum

patterns/card-gruppe-mit-tastennavigation.html

@@ -116,46 +116,10 @@
     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('width');
-          tab.style.removeProperty('flex');
-          tab.style.removeProperty('min-width');
-          tab.style.removeProperty('max-width');
-          tab.removeAttribute('data-tab-min-width');
-          tab.removeAttribute('data-tab-max-width');
-        });
-
-        if (!mobileBreakpoint.matches) {
-          return;
-        }
-
-        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.style.width = `${preferredWidth}px`;
-          tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
-          tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
-        });
-      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
           tab.setAttribute('aria-selected', String(tab === targetTab));
-          if (mobileBreakpoint.matches) {
-            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');
-          }
         });
 
         panels.forEach((panel) => {
@@ -181,14 +145,6 @@
           activateTab(nextTab);
         });
       });
-
-      applyMobileTabWidthBounds();
-      const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
-      if (activeTab) {
-        activateTab(activeTab);
-      }
-      mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
-      window.addEventListener('resize', applyMobileTabWidthBounds);
     }
   </script>
 

styleguide.css

@@ -2283,6 +2283,13 @@ section + section {
   margin: 0;
 }
 
+@media (max-width: 767px) {
+  .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
+    flex: 1 1 0;
+    min-width: max-content;
+  }
+}
+
 /* ========================================================= */
 /* Components: Cards                                         */
 /* ========================================================= */