diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 03bf4ce..fe7b369 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -17,6 +17,10 @@
+
+
+
+
@@ -106,6 +110,58 @@
+
+
+
+
+
+
+
+
@@ -116,6 +172,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) => {
@@ -145,6 +233,9 @@
activateTab(nextTab);
});
});
+
+ applyMobileBalancedTabRows();
+ window.addEventListener('resize', applyMobileBalancedTabRows);
}
diff --git a/styles/32-patterns-card-group-keyboard-nav.css b/styles/32-patterns-card-group-keyboard-nav.css
index c3ba317..6f9c6a7 100644
--- a/styles/32-patterns-card-group-keyboard-nav.css
+++ b/styles/32-patterns-card-group-keyboard-nav.css
@@ -37,8 +37,13 @@
@media (max-width: 767px) {
.sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
- flex: 1 1 0;
+ flex: 0 0 calc(
+ (
+ 100%
+ - (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
+ )
+ / var(--sg-tab-mobile-row-slots, 1)
+ );
min-width: max-content;
}
}
-