Skip to content

fix(ui): repair dead text-4xs classes and six hydration races from #1375 - #1391

Merged
BigSimmo merged 10 commits into
mainfrom
claude/design-system-followups-1375
Jul 29, 2026
Merged

fix(ui): repair dead text-4xs classes and six hydration races from #1375#1391
BigSimmo merged 10 commits into
mainfrom
claude/design-system-followups-1375

Conversation

@BigSimmo

@BigSimmoBigSimmo commented Jul 29, 2026

Copy link
Copy Markdown
Owner

Summary

Follow-ups to PR #1375 (Clinical Sky design system), which merged before these landed. One is a live defect on main; the rest remove a class of test flake that predates the port.

text-4xs is dead on main and five classes still reference it.#1375 retired the --text-4xs token, so Tailwind emits no such rule — every remaining text-4xs class is a no-op and that text silently falls back to inherited size. Two files carrying it landed from main while #1375 was in flight (#1273 phone in-page navigation mockups, #1362 therapy navigation mockups) and were dead on arrival. Repointed to text-3xs, the 10px floor, and guarded: the design-token contract now fails if any tracked file under src/ references the retired class outside a comment. Mockups are deliberately not exempt — a dead utility breaks a mockup exactly as it breaks production.

Six hydration races fixed at the source. The Chromium suite failed a different random subset on each contended run — always the same shape: a control that never enables, a menu that never opens, geometry read mid-remount. In this app visible never implies interactive: the server-rendered tree paints before React owns it, so any single un-retried action asserted once is a coin flip under load. The repo already documented this on fillVisibleQuestionInput ("Filling during that gap is immediately overwritten by hydration and leaves the submit button disabled"); the flaky sites simply bypassed that helper.

specswallowed actionfix
ui-smoke offline gate.fill() before React owned the inputuse the hydration-aware helper
ui-smoke mode menu.click() before the handler attachedretry open-then-assert
ui-smokeopenGuideSettings .click(), all 3 viewport branchesretry click-plus-dialog
ui-toolssubmitDifferentialSearchfill + submithelper now owns the fill; 3 callers inherit it
ui-accessibility differential filterfill then clickretry fill-then-enabled
ui-overlap × 2geometry sampled mid-remountretry the measurement, assertions unchanged

Every fix retries the action together with the effect it should produce, so a swallowed first attempt retries while a genuine regression still fails. These are pre-existing defects, not consequences of the token port — #1375 only ran the suite hard enough to expose them. Left alone they keep costing CI reds on unrelated PRs.

Documentation.docs/design-system.md now records that intermediate font weights (520/540/560/580/640/650/680) are deliberate on a variable face rather than drift — normalising Therapy Compass onto 600/700 was attempted during #1375 and reverted — plus the leading vocabulary and the trap that redefining Tailwind's --leading-tight/-snug silently retunes every existing call site.

RAG impact: no retrieval behaviour change — test robustness, two mockup class names, and docs only; nothing under src/lib/rag/**, clinical-search, ranking-config, the eval harness or the golden fixture is touched.

Verification

  • npm run verify:pr-localTest Files 426 passed (426), Tests 4381 passed | 3 skipped
  • Targeted Chromium re-run of every fixed spec — 18 passed under Playwright 1.62.0
  • ui-overlap full spec — 14 passed across 4 consecutive runs (previously failed at a different arbitrary width per contended run)
  • Contract tests — 37 assertions including the new orphan guard
  • check:installed-lock-parity caught a stale worktree mid-review (next 16.2.11 vs locked 16.2.12, react 19.2.7 vs 19.2.8, playwright 1.61.1 vs 1.62.0); results above are post-npm ci on matching versions

Risk and rollout

Test-only plus two mockup class names and docs. The single production-visible change is five text-4xstext-3xs swaps in mockup components, which restores intended rendering rather than altering it. Revert is a clean single-commit revert.

Clinical Governance Preflight

No ingestion, answer generation, search/ranking, document access, privacy or clinical output path is touched.

  • Source-backed claims still require linked source verification before clinical use
  • No patient-identifiable document workflow was introduced or expanded
  • Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
  • Service-role keys and private document access remain server-only
  • Demo/synthetic content remains clearly separated from real clinical sources
  • Source metadata, review status, and outdated/unknown-source behavior remain conservative
  • Deployment classification/TGA SaMD impact checked — no clinical decision-support behaviour changed

Notes

  • Ledger #108 (design-system project token manifest lags its stylesheet — resync.mjs ships with the /design-sync skill and is not a published package, so the manifest cannot be regenerated without it) and #109 (ui-overlap phone-inset flake, now fixed here).
  • These ledger rows were re-allocated twice: #096/#097 then #098/#099 were both claimed by other agents' work within the hour. The issues:next-id marker has no concurrency protection.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • UI Improvements

    • Increased the readability of navigation labels and numeric badges across phone, tablet, and desktop layouts.
  • Bug Fixes

    • Improved reliability of search, menu, guide, and mode-selection interactions during page loading.
    • Reduced intermittent layout and navigation test failures caused by hydration timing.
  • Documentation

    • Documented typography leading and font-weight conventions.
    • Added tracking for design-token synchronization and UI overlap issues.

BigSimmoand others added 5 commits July 29, 2026 20:38
The Chromium suite failed a different random subset on each contended run —
always the same shape: a control that never enables, a menu that never opens.
The repo already had the fix documented on `fillVisibleQuestionInput`:
"Production HTML can be visible before React owns the controlled input.
Filling during that gap is immediately overwritten by hydration and leaves the
submit button disabled." The flaky sites bypassed that helper and filled raw.
- ui-smoke "offline browser gate": raw fill -> fillVisibleQuestionInput.
- ui-smoke "desktop mode options": retry open-then-assert together, since a
click landing before React attaches the trigger handler is swallowed.
- ui-tools submitDifferentialSearch: the helper now owns the fill and confirms
the value stuck before submitting, so all three callers get hydration safety;
their redundant raw fills are removed.
- ui-accessibility differential filter: retry fill-then-enabled inline (that
file has no React-internals helper).
Previously flaky cases now pass 13/13 across three consecutive runs.
Also record in docs/design-system.md that intermediate font weights
(520/540/560/580/640/650/680) are deliberate on a variable face rather than
drift — normalising Therapy Compass onto 600/700 was attempted on 2026-07-28
and reverted — plus the leading vocabulary and the trap that redefining
Tailwind's --leading-tight/-snug silently retunes every existing call site.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
(cherry picked from commit 73879c63980bda09adbb9b5743c96cfefcb9a9f9)
Fifth instance of the same hydration race: the Settings trigger becomes
visible before React attaches its handler, so the click is swallowed and
"Account & app" never opens — `guide opens and dismisses at tablet` then fails
on `expect(settings).toBeVisible()` after 30s.
Wrap all three viewport branches in one retry of click-plus-resulting-dialog,
matching the shape used for the composer, the mode menu and the header
measurement. A swallowed first click retries; a dialog that never opens still
fails.
Passes 3/3 across three consecutive runs.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
(cherry picked from commit ba5893a095b2ec2a73f52c68481ad3dfccda1975)
Retiring --text-4xs killed its utility: Tailwind emits no `text-4xs` rule, so
every remaining class is a no-op and that text silently falls back to inherited
size. Two files carrying it landed from main while this port was in flight
(#1273 phone in-page navigation mockups, #1362 therapy navigation mockups), so
they were dead on arrival — five classes, nothing failing.
Repoint all five to text-3xs, the 10px floor, and guard it: the design-token
contract now fails if any tracked file under src/ references the retired class
outside a comment. Mockups are deliberately NOT exempt from this one — a dead
utility breaks a mockup exactly as it breaks production.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
(cherry picked from commit 314ca51fb5f36fd71a0722aab85365155bdddece)
Same shape as the width cases: the geometry was sampled once, so a React
remount mid-layout produced transient boxes. Assertions are unchanged and still
strict — a genuinely asymmetric header fails once the retry budget is spent.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
(cherry picked from commit 996fccdc88b7482589a8df91307be97412f0c1f0)
…ap phone-inset flake
Re-allocated from #96/#97 then #98/#99 — both pairs were taken by other
work while this branch was in flight. The issues:next-id marker has no
concurrency protection, so agents working the same hour collide on it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@coderabbitai

coderabbitaiBot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

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

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in:6 minutes

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

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 660eaa55-0210-47dc-9709-4118deb15337

📥 Commits

Reviewing files that changed from the base of the PR and between a201b57 and ff4ddfa.

📒 Files selected for processing (4)
  • docs/branch-review-ledger.md
  • docs/outstanding-issues.md
  • tests/ui-smoke.spec.ts
  • tests/ui-tools.spec.ts
📝 Walkthrough

Walkthrough

Retires text-4xs usages, documents typography contracts, adds a type-scale enforcement test, and hardens Playwright interactions against hydration and transient layout timing.

Changes

Typography and UI stability

Layer / File(s)Summary
Typography scale and design-system contracts
src/app/mockups/phone-inpage-navigation/page.tsx, src/components/therapy-navigation-mockups/rail.tsx, docs/design-system.md, tests/design-token-contract.test.ts
Navigation and badge text uses text-3xs; typography rules and a test enforce the updated type-scale contracts.
Hydration-aware UI interactions
tests/ui-accessibility.spec.ts, tests/ui-smoke.spec.ts, tests/ui-tools.spec.ts
Playwright helpers and scenarios retry hydrated input, click, enablement, and visibility interactions.
Layout flake validation and review records
tests/ui-overlap.spec.ts, docs/branch-review-ledger.md, docs/outstanding-issues.md
Overlap measurements retry transient geometry states, and review and issue ledgers record related follow-ups and status updates.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

Suggested labels:codex

Suggested reviewers:cursoragent, claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: replacing dead text-4xs classes and fixing hydration races from #1375.
Description check✅ PassedThe description covers the required sections with summary, verification, risk/rollback, governance, and notes, and is substantively complete.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch

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

@supabase

supabaseBot commented Jul 29, 2026

Copy link
Copy Markdown

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 ↗︎.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

@chatgpt-codex-connectorchatgpt-codex-connectorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:906c5a1cfc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment threadtests/ui-smoke.spec.ts
Comment threadtests/ui-smoke.spec.ts
claude added 3 commits July 29, 2026 17:02
Resolves the `docs/outstanding-issues.md` conflict. Two independent causes:
1. Rows #98#105 diverged. `main` carries the newer text (PR #1377 landed
"Done 2026-07-29" outcomes and rewrote several summaries); this branch
carried the pre-#1377 wording. Took `main`'s rows wholesale — the branch
made no edits to that range, it simply forked before them.
2. `#108`/`#109` were allocated twice. `main` used them for the verified-landed
branch deletions and the shallow-clone finding; this branch had used the same
two ids for the design-system token manifest and the `ui-overlap` flake. The
`issues:next-id` marker has no concurrency protection, which is exactly the
failure the branch's own PR notes predicted. Renumbered this branch's two rows
to #110/#111 and bumped the marker to 112. No content was dropped from either
side; all 111 rows are unique.
Also records #111 as done, since this branch is what fixes it: the ui-overlap
inset measurement now retries inside `toPass` with the 2px symmetry tolerance
and the assertions unchanged. Leaving it open with a "Next: apply the retry
shape" action would have re-queued work this PR already did.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FvU8z73P6TXUXoYBqN5K1P

@chatgpt-codex-connectorchatgpt-codex-connectorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:baecef05ca

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment threaddocs/outstanding-issues.md Outdated
BigSimmo pushed a commit that referenced this pull request Jul 29, 2026
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FvU8z73P6TXUXoYBqN5K1P
Three review findings, all correct.
`openGuide` and the mode-menu retry both re-ran an action that had already
succeeded. `toPass` schedules another attempt whenever the inner assertion's
own deadline expires, which can happen a moment AFTER the click landed — so
under the contention these retries exist to tolerate:
- `openGuide` clicked a Settings trigger the modal was already covering, or
reopened the phone menu on top of it, and timed out.
- the mode-menu retry clicked a TOGGLE a second time, closing a menu that had
just opened, and could oscillate until the budget ran out — failing a UI that
was working.
Both now return early when the thing they were about to produce already exists.
The mobile branch needed a second guard: a swallowed Settings click leaves the
phone menu OPEN, so `openMobileClinicalGuideMenu` on the retry would toggle it
shut and then fail to find Settings inside it. It now reuses an open menu and
only summons one when there is none. Without this the <768px branch could not
recover on retry at all, which is the branch the PR claims to fix.
Also moves #111 from Open items to Resolved / archive. The row recorded the
ui-overlap fix as done and simultaneously sat in the queue describing the test
as still flaking, so an operator reading the file as a work queue would have
scheduled the investigation again. The repo's own conventions say a resolved
item is archived, not left open with a done note.
verify:cheap exit 0 — Test Files 429 passed (429), Tests 4404 passed | 4 skipped.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FvU8z73P6TXUXoYBqN5K1P
@github-actions

Copy link
Copy Markdown
Contributor

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

  • Production UIneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #6582 (success).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

@BigSimmo
BigSimmo merged commit 39f2bce into mainJul 29, 2026
53 of 55 checks passed
@BigSimmo
BigSimmo deleted the claude/design-system-followups-1375 branch July 29, 2026 18:34
BigSimmo pushed a commit that referenced this pull request Jul 29, 2026
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FvU8z73P6TXUXoYBqN5K1P
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@BigSimmo@claude