Apply mobile width bounds to inactive tabs with preferred width

2026-05-21 18:28:47 +02:00
parent 28b94ec8a0
commit c7517c65b4
1 changed files with 4 additions and 1 deletions
@@ -135,11 +135,13 @@
        tabs.forEach((tab) => {
          const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
          const maxWidth = Math.ceil(currentWidth * 1.4);
+          const preferredWidth = Math.ceil(currentWidth * 1.2);
          tab.style.flex = '0 1 auto';
          tab.style.minWidth = `${currentWidth}px`;
          tab.style.maxWidth = `${maxWidth}px`;
          tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
          tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
+          tab.setAttribute('data-tab-preferred-width', `${preferredWidth}px`);
        });
      };

@@ -149,7 +151,8 @@
          if (mobileBreakpoint.matches) {
            const minWidth = tab.getAttribute('data-tab-min-width');
            const maxWidth = tab.getAttribute('data-tab-max-width');
-            tab.style.width = tab === targetTab ? maxWidth : minWidth;
+            const preferredWidth = tab.getAttribute('data-tab-preferred-width');
+            tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`;
          } else {
            tab.style.removeProperty('width');
          }