design(dictionary): measure the control row's intrinsic width in the fit strip, not its laid-out width

[BigSimmo]

Summary

• Measure the dictionary control row's intrinsic width in the mockup's fit strip, rather than the width flexbox already handed out. FitRow now probes the track under max-content for one synchronous read, so every child sizes to its own content regardless of flex-1 or ml-auto, and scrollWidth is what the row actually wants.
• Report query truncation as its own figure ("query cut by Npx") beside the fit verdict, because a row can seat every control and still be failing the reader: the query chip yields its text before it yields its box.

This closes the last unresolved item from the Dictionary phone control-row task brief, tracked as A1 of issue #2270. The commit was written on the workstation on 2026-08-22 and never reached origin, so no cloud session could see it.

Why this replaces the fix already on main

PR #2241 addressed the same Codex review finding (comment 3831169288) by tagging the query text with data-fit-text and adding the clipped scrollWidth - clientWidth back into the summed width. That corrects the search states, but it patches the sum rather than the measurement, so the idle state is still read off post-layout rectangles and truncation stays folded into a single slack number.

Probing under max-content removes the need for the add-back entirely: needed is already an intrinsic width, so the textOverflow term becomes dead and is removed here. The data-fit-text marker introduced by #2241 is kept and reused for the separate truncation figure, so the diff is the measurement change and nothing else.

Design-scratch scope

src/components/dictionary-control-row-mockups.tsx is design scratch under /mockups/**, which 404s in production. No production route, component, or clinical surface changes. It is still typechecked and still weighed by check:bundle-budget against the mockups baseline.

Verification

• npm run verify:pr-local

Run on the workstation against this commit. check:runtime, check:installed-lock-parity, format:changed, lint and typecheck all passed. The unit suite reported Tests 2 failed | 7728 passed | 72 skipped (7802); both failures are in tests/gate-receipts.test.ts and are pre-existing and environmental, not caused by this change — they call chmodSync(file, 0o755) and assert the working-tree mode changes the signature, which cannot hold on this Windows ReFS Dev Drive where core.fileMode is false and chmod is a no-op. Reproduced identically on an unmodified main at 73b1e71a0 with a clean working tree for those files: Tests 2 failed | 32 passed (34).

The steps verify:pr-local did not reach after that failure were then run directly and all passed: npm run build (exit 0, Client bundle secret surface check passed), npm run check:bundle-budget against a fresh .next (exit 0; mockups (design scratch, 404s in production, 100 routes, 119 exclusive chunks): 423.5 KiB gzip — baseline 370.2 KiB, within tolerance), check:rag:fixtures (36 golden cases, 26 suites), check:medication-interactions and check:medication-lexicon-report.

The bundle-budget run also emitted its known stale-baseline drift warnings (production +5.3%, route / +7.8%, route /documents/search +6.7%, baseline 324 commits behind). Those are the pre-existing #QSHHGK baseline-ownership issue and are not caused by this change; the check still exits 0.

• UI verification not run: npm run verify:ui was not run for this change. The Chromium suites exclude mockups by construction (test:e2e:pr runs with --grep-invert "@quarantine|@mockup"), so the gate has no coverage of this file to offer. The full browser gates are being run separately against merged main as A2 of Local-only follow-ups after #2253 / #2266 / #2268 — browser gates, orphaned commits, dead reconcile branches, Dev Drive #2270.

Because this is a measurement change that no automated gate can observe, it was verified live in Chromium against the local dev server at the URL npm run ensure printed, reading the rendered verdicts in all three fit modes:

### Measuring idle
320 px wraps · 15px short
360 px one row · 25px spare
390 px one row · 55px spare
430 px one row · 95px spare
### Measuring with "tardive"
320 px wraps · 31px short query cut by 30px
360 px one row · 9px spare
390 px one row · 39px spare
### Measuring with "tardive dyskinesia"
320 px wraps · 98px short query cut by 98px
390 px wraps · 28px short query cut by 28px
430 px one row · 12px spare

That reproduces the measurements recorded in the original commit message exactly, and it is the evidence behind the design decision to give the search term its own line: "tardive dyskinesia" does not seat on one row until 430 px, which no phone in the width table provides.

Risk and rollout

• Risk: None to production. The change is confined to one design-scratch mockup component that 404s in production and is excluded from the wiring and reachability gates. The worst case is a wrong number displayed on a study page that only developers open.
• Rollback: git revert this single commit. It touches one file and depends on nothing else.
• Provider or production effects: None.
• RAG impact: none.

Notes

The Codex review thread this addresses is 3831169288 on PR #2241.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your current included review allowance is based on your included PR review attempts over the past 7 days.

Next review available in:33 minutes

Limit details: You’ve used the included review currently available. Your 90 included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 30ed9027-5c45-413f-b1bb-7119b4bc47fe

📥 Commits

Reviewing files that changed from the base of the PR and between 2ca31d6 and 0d26cb5.

📒 Files selected for processing (1)

• src/components/dictionary-control-row-mockups.tsx

---

_{Comment @coderabbitai help to get the list of available commands.}

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.