Adjust mobile tab button min/max widths in card group pattern

patterns/card-gruppe-mit-tastennavigation.html

@@ -116,6 +116,24 @@
     if (tabGroup) {
       const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
       const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
+      const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
+
+      const applyMobileTabWidthBounds = () => {
+        tabs.forEach((tab) => {
+          tab.style.removeProperty('min-width');
+          tab.style.removeProperty('max-width');
+        });
+
+        if (!mobileBreakpoint.matches) {
+          return;
+        }
+
+        tabs.forEach((tab) => {
+          const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
+          tab.style.minWidth = `${currentWidth}px`;
+          tab.style.maxWidth = `${Math.ceil(currentWidth * 1.4)}px`;
+        });
+      };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
@@ -145,6 +163,10 @@
           activateTab(nextTab);
         });
       });
+
+      applyMobileTabWidthBounds();
+      mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
+      window.addEventListener('resize', applyMobileTabWidthBounds);
     }
   </script>