Apply balanced mobile tab rows to VSF fundamental drawer

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

@@ -481,6 +481,38 @@
     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) => {
@@ -510,6 +542,9 @@
           activateTab(nextTab);
         });
       });
+
+      applyMobileBalancedTabRows();
+      window.addEventListener('resize', applyMobileBalancedTabRows);
     }
   </script>