diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html index 2ed52f1..13616eb 100644 --- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html +++ b/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); }