update

design/index-web.html

@@ -221,9 +221,11 @@
         const groupPadding = parseFloat(tabsStyle.paddingLeft) + parseFloat(tabsStyle.paddingRight);
         const itemPadding = parseFloat(buttonStyle.paddingLeft) + parseFloat(buttonStyle.paddingRight);
         const contentWidth = Math.ceil(widestLabel + itemPadding);
-        const availableWidth = Math.max(0, tabs.clientWidth - groupPadding);
+        const parentWidth = tabs.parentElement?.clientWidth ?? tabs.clientWidth;
+        const availableWidth = Math.max(0, parentWidth - groupPadding);
         const itemWidth = Math.min(contentWidth, availableWidth / labels.length);
         tabs.style.setProperty('--tab-item-width', `${itemWidth}px`);
+        tabs.style.setProperty('--tab-group-width', `${itemWidth * labels.length + groupPadding}px`);
       };
       const positionMarker = (tab, animate = true) => {
         if (!marker || !tab) return;
@@ -251,10 +253,12 @@
         });
       });
       if ('ResizeObserver' in window) {
-        new ResizeObserver(() => {
+        const resizeObserver = new ResizeObserver(() => {
           equalizeItems();
           positionMarker(tabs.querySelector('.game-tab.selected'), false);
-        }).observe(tabs);
+        });
+        resizeObserver.observe(tabs);
+        if (tabs.parentElement) resizeObserver.observe(tabs.parentElement);
       }
     });