gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make mobile tab widths clamp between current and plus-40-percent

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 18:06:07 +02:00
parent 736c433679
commit e2eb0fd4aa
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+6 -1
View File
@@ -120,6 +120,8 @@
const applyMobileTabWidthBounds = () => { const applyMobileTabWidthBounds = () => {
tabs.forEach((tab) => { tabs.forEach((tab) => {
tab.style.removeProperty('width');
tab.style.removeProperty('flex');
tab.style.removeProperty('min-width'); tab.style.removeProperty('min-width');
tab.style.removeProperty('max-width'); tab.style.removeProperty('max-width');
}); });
@@ -130,8 +132,11 @@
tabs.forEach((tab) => { tabs.forEach((tab) => {
const currentWidth = Math.ceil(tab.getBoundingClientRect().width); const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
const maxWidth = Math.ceil(currentWidth * 1.4);
tab.style.width = `clamp(${currentWidth}px, 33vw, ${maxWidth}px)`;
tab.style.flex = '0 1 auto';
tab.style.minWidth = `${currentWidth}px`; tab.style.minWidth = `${currentWidth}px`;
tab.style.maxWidth = `${Math.ceil(currentWidth * 1.4)}px`; tab.style.maxWidth = `${maxWidth}px`;
}); });
}; };