[bug][mobile] Terminal/Issues/Pulls/Actions tabs overflow — the icon-only pattern exists 80 lines above in the same file and was not applied

[serge-ivo]

The repo tab row keeps its labels on mobile — the fix pattern already exists 80 lines above it

Reported: Terminal · Issues · Pulls · Actions overflow the screen on mobile.

Where it is

agents/coder/web/src/CodingTab.tsx:887-896 — the single-repo tab helper:

const tab = (id: typeof soloView, label: string, Icon: typeof SquareTerminal) => (
  <button
    type="button"
    onClick={() => setSoloView(id)}
    aria-pressed={soloView === id}
    className={`flex items-center gap-1 px-2.5 py-1 text-xs font-bold ${…}`}
  >
    <Icon size={13} /> {label}
  </button>
);

No responsive class anywhere: the label renders at every width, and four of these sit in one inline-flex row (:899-900).

The same file already solves this correctly

CodingTab.tsx:807-808, the Co-pilot / Terminal toggle:

title="Terminal" aria-label="Terminal" aria-pressed={…}
className="flex items-center justify-center gap-1 w-8 sm:w-auto sm:px-2 py-1 text-xs font-bold …"
><SquareTerminal size={14} /><span className="hidden sm:inline">Terminal</span></button>

Icon-only below sm, labelled from sm up — exactly what was asked for. It was applied to the two-button toggle and not to the four-button row, which is the one that actually overflows.

The fix

Bring tab() in line with its sibling:

const tab = (id: typeof soloView, label: string, Icon: typeof SquareTerminal) => (
  <button
    type="button"
    onClick={() => setSoloView(id)}
    title={label}
    aria-label={label}
    aria-pressed={soloView === id}
    className={`flex items-center justify-center gap-1 w-8 sm:w-auto sm:px-2.5 py-1 text-xs font-bold ${…}`}
  >
    <Icon size={13} /><span className="hidden sm:inline">{label}</span>
  </button>
);

title and aria-label are not optional here. Today the button's accessible name comes from its visible text; hiding the text without adding them leaves four unlabelled icon buttons — an a11y regression of exactly the kind #389 was filed to fix. The sibling at :807 sets both, which is why it is the right thing to copy rather than re-derive.

Alternatives considered and rejected

• Let the row wrap. The container is already flex-wrap at :899, so it can wrap — and a wrapped tab bar pushes the terminal pane down on the screen where vertical space is scarcest ([bug] Terminal output is invisible on mobile — TmuxTab stacks eight blocks in one column and the output pane is the only one that yields #370 was filed for precisely that class of problem on this tab).
• Horizontal scroll on the tab row. Works, but hides tabs behind a scroll gesture with no affordance; four icons fit trivially at 320px.
• Shorten the words ("Term", "PRs"). Rejected — truncated labels read as jargon and still cost more width than an icon, and it would diverge from the icon-only convention the instance tab bar already uses on mobile.

Acceptance criteria

• At 320px and 390px the four tabs fit on one line with no horizontal overflow and no wrap.
• Each tab has an accessible name at every width (aria-label), and a tooltip on desktop.
• At ≥sm the row is unchanged — icon + label as today.
• The active-tab styling still reads clearly when only the icon is visible.

Regression risk

• w-8 fixes the mobile width; if any tab's icon needs more room the row silently clips. Four size={13} icons in w-8 buttons is ~128px at 320px, so there is headroom, but the check belongs in a WebKit measurement rather than review — and note the e2e mobile guard runs Chromium (see [bug][mobile] Copy and Delete sit on top of the message timestamp — 42px of 110px covered in WebKit, and removing the year only recovers 30px #426).

Not measured. This is filed from the code, which is unambiguous (no responsive class at all, versus a sibling that has one). I did not reproduce it in a browser because the single-repo Coder view needs specific instance state; the acceptance criteria above are written so the implementer measures it.

Related: #426 (the other mobile-overflow defect in the chat header, with measurements), #389 (tap targets and accessible names on this surface), #370 (mobile layout on this same tab).

[serge-ivo]

Shipped in 98f9adf on main.

The fix is the one the issue specified: the solo tab() helper now copies its sibling ~80 lines above rather than re-deriving a second pattern — w-8 sm:w-auto sm:px-2.5, <span className="hidden sm:inline">{label}</span>, and title + aria-label on every button.

One correction to the issue's premise, measured rather than assumed. The labelled row did not pan the page. At 320px the tab group ended 10px inside the right edge (overflowPastViewport: -10), and every horizontal-overflow assertion in the existing suite measured zero both before and after — precisely the "green guard is not proof" failure mode. What actually happened is that the four labelled tabs took 302px of a 304px row, leaving nothing for the repo caption and the 58px action cluster sharing that flex-wrap line. So the guard asserts the tab group's width, not page overflow, because width is the thing that moves.

WebKit (Desktop Safari), measured:

	tab group	per tab	row content	past viewport
before, 320px	302px	87 / 75 / 65 / 73	304px	−10px
after, 320px	130px	32 x 4	304px	−182px
before, 390px	302px	same	374px	−80px
after, 390px	130px	32 x 4	374px	−252px

A regression caused and fixed in the same commit: removing the label removes a 16px text line box from a button whose remaining content is a 13px icon, so py-1 alone dropped the tabs from 24px to 21px — under the 24px floor #389 landed on this surface. h-6 sm:h-auto restores it and the test asserts the floor, so the a11y fix and the layout fix cannot be separated later.

The guard was proven in both directions, by me, not taken on trust. I reverted the styling on the merged tree, rebuilt the bundle, and re-ran: the two geometry specs failed with the pre-fix geometry quoted back verbatim (the tab group is 302px wide at 320w — the labels are rendering below sm), then passed again once restored. Note the two accessible-name specs pass on the pre-fix code too — correctly, since a visible label is an accessible name; they exist to stop a future icon-only change dropping it.

Reused existing patterns rather than adding a fourth: the #389 target floor and the #414 mobile geometry sweep (WebKit, 320 + 390).

Verification. Full ten-gate bar green on the rebased tree (typecheck; vitest 6,768; biome; design-tokens; agents-allowlist; qa-config; file-size; migrations; test-isolation; docs:drift). E2E 161/161 chromium, 110/110 webkit, zero failures. scripts/check-file-size.mjs pin for CodingTab.tsx raised 1289 → 1302 with the reason written into the script (11 of the 13 lines are prose explaining why title/aria-label and h-6 are load-bearing and must not be tidied away).

Verified in production, not just in CI. CI and the Host Worker deploy are green on 98f9adf; https://proagentstore.online/console/ serves the new classes; and I re-ran the six WebKit specs with E2E_BASE_URL=https://proagentstore.online — 6/6 pass at 320px and 390px against the deployed console.

Two things deliberately not folded in

1. Naming drift in the issue. It calls the fourth tab "Actions"; the code says "Builds" (Hammer). Implemented against the code; nothing renamed.
2. The header row is still two lines (65px) at both widths — and the tabs are not the cause. The repo caption (CodingTab.tsx, text-xs text-muted truncate min-w-0) has a 219px max-content, and flexbox collects flex lines from hypothetical main size before shrinking anything, so a truncate item in a flex-wrap row wraps instead of ellipsising. It needs flex-1/basis-0. Different element, different root cause, outside this issue's acceptance criteria — it deserves its own ticket. Worth noting the [bug] One laptop still shows as three machines — nothing has claimed an id yet, the stale names can never be claimed, and the Terminals page does not fold by machine #393 source guard at store/console/src/lib/truncation.test.ts cannot see it: it only fires on truncate + shrink-0, and this has min-w-0. The new specs therefore record the row height in every failure message rather than asserting a threshold this change does not move — an assertion there would either fail forever or lock the defect in.

All four acceptance criteria are met and measured.