Use intrinsic mobile tab widths and remove legacy row-slot logic

patterns/vsf-card-listen-fundamentalanalyse-drawer.html

@@ -520,38 +520,6 @@
     if (tabGroup) {
       const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
       const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
-      const tabList = tabGroup.querySelector('[role="tablist"]');
-
-      const applyMobileBalancedTabRows = () => {
-        if (!tabList) {
-          return;
-        }
-
-        tabs.forEach((tab) => {
-          tab.style.removeProperty('--sg-tab-mobile-row-slots');
-        });
-
-        if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
-          return;
-        }
-
-        const maxItemsPerRow = 3;
-        const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
-        const baseRowSize = Math.floor(tabs.length / rowCount);
-        const rowRemainder = tabs.length % rowCount;
-        let tabStartIndex = 0;
-
-        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-          const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
-          for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
-            const tab = tabs[tabStartIndex + itemOffset];
-            if (tab) {
-              tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
-            }
-          }
-          tabStartIndex += rowSize;
-        }
-      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
@@ -582,8 +550,6 @@
         });
       });
 
-      applyMobileBalancedTabRows();
-      window.addEventListener('resize', applyMobileBalancedTabRows);
     }
   </script>
 

styles/32-patterns-card-group-keyboard-nav.css

@@ -37,7 +37,7 @@
 
 @media (max-width: 767px) {
   .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
-    flex: 0 0 auto;
+    flex: 0 1 auto;
     min-width: max-content;
     white-space: nowrap;
   }