feedback5 WZ: the 干员调配 overlay's top bar keeps its right column clear of the tabs (public/css/screens/loadout.css)

0.2.0's third tab 自选编队 (WK 0def7ba, merged in d6fd800e — the toolbar check passes on its parent) widened the centre
column of the symmetric grid, and the co-op briefing's countdown + 导出 / 导入 / 全部恢复默认 no longer fit in their half:
they ran 4 px into the tabs at 667×375 (loadout.e2e's toolbar check), 63 px at 844×390 (the countdown on 自选编队) and,
in English, at every size up to 1920×1080. Not the briefing's 本局禁用干员 lines: the overlap is the overlay's .lo-top.

- the grid centres the tabs while both sides fit in equal halves (minmax(max-content, 1fr) minmax(0, auto)
  minmax(max-content, 1fr)) and shifts them otherwise; the tab strip scrolls only as a last resort, never overlaps;
- the countdown caption breaks at its spaces (Loadout / Deadline; 调配截止 stays one line);
- tighter tabs at ≤ 1200 px; at ≤ 1100 px the briefing's countdown takes the place of the 已调整 / 同步 chips;
- phones in landscape (≤ 1000 px, up to the 932 px ones): no chips, and 返回 / 全部恢复默认 (全部持有, 全部清空 — each
  confirms first) show their icon, the text kept as their accessible name. Desktop zh looks as before.

Checked: zh and en × briefing and lobby × the three tabs × 18 sizes from 667×375 to 2560×1440 — no overflow, overlap
or offscreen button, the tabs never scroll. The e2e toolbar check now runs zh and en at 667×375 and 844×390 (and en at
1920×1080) and asserts the three tabs show in full; it fails on the old CSS. Golden unchanged.

public/css/screens/loadout.css

@@ -32,8 +32,11 @@
 .lo > :where(:not(.lo__bg)) { position: relative; }
 
 /* ---- top bar ---------------------------------------------------------------------------------------------------- */
+/* The tabs stay centred while both sides fit in equal halves beside them; a wider side keeps its own width and shifts
+   the tabs instead (0.2.0: three tabs and the co-op countdown ran the right column into the tabs on phones and in
+   English), and only when nothing else is left does the tab strip scroll (.lo-tabs). */
 .lo-top {
-  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .2rem;
+  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: .2rem;
   height: max(1rem, 48px); padding: 0 .36rem;
   background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
   border-bottom: 1px solid var(--line);
@@ -43,7 +46,7 @@
   background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
 }
 .lo-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
-.lo-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; }
+.lo-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; min-width: 0; }
 .lo-top__title { display: flex; align-items: center; gap: .12rem; margin: 0; font-size: max(.32rem, 16px); font-weight: 900; letter-spacing: .14em; line-height: 1.15; }
 .lo-top__icon { width: max(.3rem, 16px); height: max(.3rem, 16px); object-fit: contain; color: var(--mint-500); }
 .lo-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
@@ -51,7 +54,8 @@
 .lo-count b { color: var(--mint-400); font-size: max(.22rem, 13px); margin: 0 .02rem 0 .06rem; }
 /* co-op briefing: time left before the match locks the loadout (the overlay covers the briefing's own countdown) */
 .lo-deadline { --cd-h: max(.44rem, 20px); flex: none; }
-.lo-deadline .countdown__label { font-size: max(.11rem, 8px); }
+/* its caption breaks at its spaces (Loadout / Deadline) rather than widening the column; 调配截止 stays one line */
+.lo-deadline .countdown__label { font-size: max(.11rem, 8px); width: min-content; word-break: keep-all; text-align: right; }
 .lo-sync { font-size: max(.14rem, 10px); padding: .03rem .1rem; border: 1px solid var(--line-2); color: var(--text-lo); white-space: nowrap; letter-spacing: .04em; }
 .lo-sync.is-ok { color: var(--mint-400); border-color: var(--mint-800); }
 .lo-sync.is-busy { color: var(--text-md); }
@@ -330,7 +334,7 @@
 .lo-locknote .icon { width: .16rem; height: .16rem; }
 
 /* ---- tabs: 干员调配 / 干员持有 (0.2.0 补位) ---------------------------------------------------------------------------- */
-.lo-tabs { display: flex; align-items: stretch; gap: .04rem; }
+.lo-tabs { display: flex; align-items: stretch; gap: .04rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
 .lo-tab {
   display: inline-flex; align-items: center; gap: .08rem; padding: .02rem .16rem; font: inherit; font-size: max(.24rem, 13px); font-weight: 900;
   letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
@@ -382,7 +386,6 @@
 @media (max-width: 760px) {
   .own { padding: .1rem .16rem .16rem; }
   .own__lead { display: none; }
-  .lo-tab { padding: .02rem .08rem; letter-spacing: .04em; }
 }
 
 /* ---- 自选编队 (screens/diy.js): four DIY slots by tier, the slot picker (operator list + skill / module) --------------- */
@@ -502,14 +505,27 @@
 .sp-loadout-open .app-root > .screen { visibility: hidden; }
 
 /* ---- narrow / short viewports ------------------------------------------------------------------------------------------- */
+/* tighter tabs below 1200 px: the co-op briefing's countdown, chips and buttons beside three English tabs */
+@media (max-width: 1200px) {
+  .lo-tab { padding: .02rem .08rem; letter-spacing: .04em; }
+}
 @media (max-width: 1100px) {
   .lo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 6.4rem); gap: .16rem; padding: .12rem .2rem .16rem; }
   .lo-chip__lbl { display: none; }
+  /* the co-op briefing's countdown takes the place of the 已调整 / 同步 chips */
+  .lo-deadline ~ .lo-sync, .lo-deadline ~ .lo-count { display: none; }
+}
+/* phones in landscape (up to 932 px wide): the top bar keeps the tabs clear of the right column — no 已调整 / 同步 chips,
+   and 返回 / 全部恢复默认 (全部持有, 全部清空; each confirms first) show their icon only, the text staying their name */
+@media (max-width: 1000px) {
+  .lo-count, .lo-sync { display: none; }
+  .lo-top .btn__icon + .btn__label {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
 }
 /* phones (the root scale is clamped at 40 px: less than ~14 rem of width): the detail slides over the roster */
 @media (max-width: 760px) {
   .lo-top { padding: 0 .16rem; }
-  .lo-count, .lo-sync { display: none; }
   .lo-body { grid-template-columns: minmax(0, 1fr); }
   .lo-detail-wrap { display: none; }
   .lo-body.is-detail .lo-roster { display: none; }

test/ui/loadout.e2e.test.js

@@ -243,19 +243,33 @@ describe('干员调配 overlay (real server, headless Chrome)', { skip: !ENABLED
     await page.waitForSelector('.lo-top .lo-deadline', { visible: true, timeout: 3000 });
     assert.match(await page.$eval('.lo-top .lo-deadline', (el) => el.getAttribute('aria-label')), /剩余\d+秒/);
     // review: the two new 导出 / 导入 buttons must fit next to the countdown on a narrow phone in landscape (667×375).
+    // 0.2.0: the third tab (自选编队) ran the right column into the tabs there, at 844×390, and in English at every size.
     // Only the size changes (toggling isMobile / hasTouch would make puppeteer reload the page).
-    await page.setViewport({ width: 667, height: 375 });
-    const bar = await page.evaluate(() => {
-      const top = document.querySelector('.lo-top');
-      const right = document.querySelector('.lo-top__right').getBoundingClientRect();
-      const center = document.querySelector('.lo-top__center').getBoundingClientRect();
-      const buttons = [...document.querySelectorAll('.lo-top__right .btn')].map((b) => Math.round(b.getBoundingClientRect().right));
-      return { overflow: top.scrollWidth - top.clientWidth, overlap: right.left < center.right, offscreen: right.right > innerWidth, buttons };
-    });
-    assert.ok(bar.overflow <= 0, `the top bar does not scroll sideways (${JSON.stringify(bar)})`);
-    assert.equal(bar.overlap, false, `the right column does not run into the title (${JSON.stringify(bar)})`);
-    assert.equal(bar.offscreen, false, `every button ends inside the viewport (${JSON.stringify(bar)})`);
-    await page.screenshot({ path: path.join(OUT, 'loadout-narrow-toolbar.png') });
+    const switchLang = async (lang) => {
+      await page.evaluate((l) => import('/js/ui/lang.js').then((m) => m.switchLang(l)), lang);
+      await page.waitForFunction((l) => document.documentElement.lang.startsWith(l) && /[一-鿿]/.test(document.querySelector('.lo-tabs').textContent) === (l === 'zh'), { timeout: 5000 }, lang);
+    };
+    for (const [lang, sizes] of [['zh', [[667, 375], [844, 390]]], ['en', [[667, 375], [844, 390], [1920, 1080]]]]) {
+      if (lang !== 'zh') await switchLang(lang);
+      for (const [w, h] of sizes) {
+        await page.setViewport({ width: w, height: h });
+        const bar = await page.evaluate(() => {
+          const top = document.querySelector('.lo-top');
+          const tabs = document.querySelector('.lo-tabs');
+          const right = document.querySelector('.lo-top__right').getBoundingClientRect();
+          const center = document.querySelector('.lo-top__center').getBoundingClientRect();
+          const buttons = [...document.querySelectorAll('.lo-top__right .btn')].map((b) => Math.round(b.getBoundingClientRect().right));
+          return { overflow: top.scrollWidth - top.clientWidth, overlap: right.left < center.right, offscreen: right.right > innerWidth, tabsCut: tabs.scrollWidth - tabs.clientWidth, buttons };
+        });
+        const at = `${lang} ${w}×${h} ${JSON.stringify(bar)}`;
+        assert.ok(bar.overflow <= 0, `the top bar does not scroll sideways (${at})`);
+        assert.equal(bar.overlap, false, `the right column does not run into the title (${at})`);
+        assert.equal(bar.offscreen, false, `every button ends inside the viewport (${at})`);
+        assert.ok(bar.tabsCut <= 0, `the three tabs show in full (${at})`);
+        if (w === 667) await page.screenshot({ path: path.join(OUT, `loadout-narrow-toolbar${lang === 'zh' ? '' : `-${lang}`}.png`) });
+      }
+    }
+    await switchLang('zh');
     await page.setViewport({ width: 1920, height: 1080 });
     await page.type('.lo-search input', '隐现');
     await page.waitForFunction(() => document.querySelectorAll('.lo-card').length === 1, { timeout: 5000 });