fix(sw): expand viewer model layout tabs and strengthen responsive tests

packages/sw/src/theme/sw-viewer.css

@@ -26,6 +26,8 @@
   --hm-sw-viewer-radius: 4px;
   --hm-sw-viewer-control-height: 40px;
   --hm-sw-viewer-button-height: 34px;
+  /* Model / Layout field face: widest size (2026-10-23); narrower when the header has less room. */
+  --hm-sw-viewer-tabs-max-width: 378px;
   --hm-sw-viewer-font-size: 14px;
   --hm-sw-viewer-label-size: 11px;
   --hm-sw-viewer-icon-size: 16px;
@@ -351,11 +353,18 @@ button.hm-sw-viewer-header__brand { text-align: left; }
 .hm-sw-viewer-icon__glyph { position: relative; }
 .hm-sw-viewer-icon svg { width: 100%; height: 100%; overflow: visible; }
 
-/* Tabs (Model / Layout): 40px triggers with an 11px count; the active one turns #FFC600. */
-.hm-sw-viewer-header__tabs { display: flex; align-items: center; gap: var(--hm-sw-viewer-gap); }
+/* Tabs (Model / Layout): 40px triggers with an 11px count; the active one turns #FFC600.
+   Width (2026-10-23): equal columns (1fr: each at least the widest name + count, so they never overlap). A group
+   holding only the tabs starts at that natural width and takes the object's free room up to
+   --hm-sw-viewer-tabs-max-width (outer field face); with less room it stays narrower, and below the natural width the
+   measured steps move it into More as before (the measurement, `data-measuring`, uses the natural width). */
+.hm-sw-viewer-header__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: var(--hm-sw-viewer-gap); }
+.hm-sw-viewer-header__group:has(> .hm-sw-viewer-header__tabs:only-child) { flex: 1 0 auto; box-sizing: border-box; max-width: var(--hm-sw-viewer-tabs-max-width); }
+.hm-sw-viewer-header__group > .hm-sw-viewer-header__tabs:only-child { flex: 1 1 auto; }
 .hm-sw-viewer-header .hm-sw-viewer-header__tab {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--hm-sw-viewer-gap);
   height: var(--hm-sw-viewer-control-height);
   padding: 0 8px;