UI formatting fixes + production-page polish by BigSimmo · Pull Request #494 · BigSimmo/Database

BigSimmo · 2026-07-11T13:55:12Z

What this is

Presentation-layer polish, rebuilt on top of current main (after #483 redesigned the differential detail page). The original branch was reset to main and only the fixes that are still needed against current code were re-applied, so nothing here reverts #483's redesign.

Your two reported bugs

On /differentials/diagnoses/[slug]:

Action buttons wrapped onto two lines — already fixed on main by feat(differentials): interactive diagnosis detail page with honest safety snapshot #483 (short "Compare" label + shared copy button). This PR adds shrink-0 to the desktop action cluster so the Save icon button can't be crushed below 44px at ~1024px, plus whitespace-nowrap on Compare.
Boxy teal outline on the active tab — still present on main and fixed here: a new .focus-ring-tab class draws an inset rounded ring (outline-offset: -4px, border-radius: var(--radius-md), no halo) instead of the global full-height focus box that collided with the tablist border. Inactive tabs get a transparent bottom border to remove the 2px layout jump on tab switch. feat(differentials): interactive diagnosis detail page with honest safety snapshot #483's roving-tabindex keyboard nav, nowrap, and flex-1 layout are all preserved.

Repo-wide sweep

A Playwright sweep (scratch tooling, not committed) ran three detectors — horizontal overflow, wrapped control labels, sub-44px tap targets — across 15 production routes × 7 widths (320/375/414/768/1024/1280/1536) in demo mode, both before and after the fixes.

Still-present defects on current main, now fixed:

Defect	File
Tag-cloud chips painted a focus ring on mouse click (`focus:` not `focus-visible:`)	`DocumentTagCloud.tsx`
Launcher category filters: 28px (mobile) / 36px (desktop)	`applications-launcher-page.tsx`
Service-detail Copy row buttons: 40px	`services/service-detail-page.tsx`
Favourites More-actions, library sidebar rows, compact toggle: 36px	`favourites-command-library-page.tsx`, `favourites-library-nav.tsx`
Detail Save icon button crushed to 27px at 1024px	`differentials/differential-detail-page.tsx`

Final sweep after fixes: the only two remaining flags are intentional design choices left as-is, not defects:

/services quick-link pills at ~38px tall on desktop — main's deliberate lg:min-h-9 density (AA-compliant for pointer input).
The detail "Map" tab at 38px wide at 320px — feat(differentials): interactive diagnosis detail page with honest safety snapshot #483's flex-1 equal-width tab strip (contiguous, 46px tall). Changing it would mean redesigning feat(differentials): interactive diagnosis detail page with honest safety snapshot #483's tab layout, out of scope here.

Verification

Ran npm run typecheck: passed.
Ran npm run lint: passed.
Ran npx prettier --check on all touched files: passed.
Ran npm run test:e2e:chromium tests/ui-tools.spec.ts (new detail-page regression test): passed.
Keyboard focus verified live on the rebuilt page: tab ring renders inset/rounded (outline-offset: -4px, no halo); dark mode and prefers-reduced-motion render correctly.
Not run: npm run verify:release — provider boundary (calls OpenAI/governance/eval). Available as a user-approved final gate.

Scope / governance

Presentation layer only — CSS class strings, one new globals.css class, and one Playwright test. No ingestion, answer generation, search/ranking, source rendering, document access, privacy, API-route, rate-limit, or environment surface is touched.

🤖 Generated with Claude Code

supabase · 2026-07-11T13:55:18Z

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

coderabbitai · 2026-07-11T13:55:20Z

📝 Walkthrough

Walkthrough

The changes standardize focus styling and control sizing across several UI surfaces, use prompt-specific descriptions in medication cards, and add diagnosis-detail regression checks for touch targets, tab wrapping, and horizontal overflow.

Changes

UI accessibility and presentation consistency

Layer / File(s)	Summary
Focus and tab interaction patterns `src/app/globals.css`, `src/components/DocumentTagCloud.tsx`, `src/components/applications-launcher-page.tsx`, `src/components/differentials/differential-detail-page.tsx`	Adds shared tab focus styling, removes tag-specific focus overrides, increases filter-tab heights, and updates differential tab styling.
Application control sizing and layout `src/components/clinical-dashboard/...`, `src/components/differentials/differential-detail-page.tsx`, `src/components/services/service-detail-page.tsx`	Increases dimensions for library controls, action buttons, referral copy actions, and overlap pills, while preventing desktop compare actions from shrinking.
Medication prompt descriptions `src/components/clinical-dashboard/medication-prescribing-workspace.tsx`	Uses each medication prompt’s description when rendering prompt actions.
Touch-target and narrow-viewport regression coverage `tests/ui-tools.spec.ts`	Checks save-action sizing, single-line tab rendering at 320px, and horizontal overflow on the diagnosis detail page.

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

🔕 Pre-merge checks override applied

The pre-merge checks have been overridden successfully. You can now proceed with the merge.

Overridden by @BigSimmo via checkbox on 2026-07-11T15:42:55.105Z.

❌ Failed checks (1 error, 1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Verification Claims	❌ Error [IGNORED]	PR description includes verification claims like “Keyboard focus verified live...” and a “Playwright sweep...” without an exact command/check + result.	Rewrite verification notes to name the exact command/check and outcome, e.g. “Ran npx playwright test ...: passed” or “Not run: manual check only”.
Docstring Coverage	⚠️ Warning	Docstring coverage is 4.35% which is insufficient. The required threshold is 70.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is related to the changes, but it is broad and generic rather than clearly naming the main fix.	Use a more specific title that names the primary change, such as polishing differential tabs and touch targets.

✅ Passed checks (8 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is detailed and covers the summary plus verification results, even though it paraphrases the template headings.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Generated And Sensitive Files	✅ Passed	Changed paths are only source/test files; no secrets, keys, .env files, logs, caches, build outputs, or browser artifacts were committed.
Risky Git Or Deployment Actions	✅ Passed	No touched files or added docs/scripts/workflows contain force-push, reset --hard, destructive cleanup, or unsafe deployment guidance.
Supabase Project And Schema Safety	✅ Passed	PR touches only UI components, CSS, and one Playwright test; no Supabase project refs, migrations, RLS/policy, or env/docs changes found.
Runtime And Package Manager Integrity	✅ Passed	PR diff only touches UI TS/CSS/test files; no package.json, lockfile, .npmrc, or install-flag changes were introduced. Repo still pins Node 24/npm 11 with engine-strict.
Api Route Failure Handling	✅ Passed	PASS: The only change is a UI description string in a client component; no API/server/action/provider code or failure-handling paths were touched.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/site-formatting-polish-b91374

✨ Simplify code

Create PR with simplified code
Commit simplified code in branch claude/site-formatting-polish-b91374

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

BigSimmo · 2026-07-11T14:19:45Z

@copilot resolve the merge conflicts on this branch.

BigSimmo · 2026-07-11T14:22:05Z

@codex resolve all merge conflicts and issues blocking merge and address comments on this PR to merge

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/ui-tools.spec.ts`:
- Around line 1228-1234: Reduce the measurementTolerance in expectMinTouchTarget
from 2px to a subpixel-sized value such as 0.5–1px, while keeping the existing
height and width minimum checks unchanged.

🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 800e7bf5-c2c7-49db-bb59-3b76b6795276

📥 Commits

Reviewing files that changed from the base of the PR and between 70ec640 and a0ba771.

📒 Files selected for processing (18)

src/app/globals.css
src/components/DocumentTagCloud.tsx
src/components/applications-launcher-page.tsx
src/components/clinical-dashboard/account-setup-dialog.tsx
src/components/clinical-dashboard/clinical-output-helpers.tsx
src/components/clinical-dashboard/evidence-panels.tsx
src/components/clinical-dashboard/favourites-command-library-page.tsx
src/components/clinical-dashboard/favourites-hub.tsx
src/components/clinical-dashboard/favourites-library-nav.tsx
src/components/clinical-dashboard/master-search-header.tsx
src/components/clinical-dashboard/medication-prescribing-workspace.tsx
src/components/differentials/differential-detail-page.tsx
src/components/differentials/differential-presentation-workflow-page.tsx
src/components/differentials/differential-stream-page.tsx
src/components/forms/form-detail-page.tsx
src/components/mode-home-template.tsx
src/components/services/service-detail-page.tsx
tests/ui-tools.spec.ts

💤 Files with no reviewable changes (1)

src/components/clinical-dashboard/evidence-panels.tsx

chatgpt-codex-connector · 2026-07-11T14:34:41Z

Summary

Merged origin/main into the PR branch and resolved all reported merge conflicts; committed the merge as 0d5131b (Merge remote-tracking branch 'origin/main' into work).
Preserved the differential-detail no-wrap/tap-target fixes while integrating the current main-branch action wiring, saved-state behavior, copy button, and comparison flow. src/components/differentials/differential-detail-page.tsxL720-L739 src/components/differentials/differential-detail-page.tsxL757-L784
Kept header controls at h-tap w-tap and retained the inset/scrollable tab focus treatment while preserving main’s roving keyboard tab behavior. src/components/differentials/differential-detail-page.tsxL806-L819 src/components/differentials/differential-detail-page.tsxL866-L893
Reconciled the medication filter strip with main’s icons/counts while preserving non-wrapping 44px tap-target styling. src/components/clinical-dashboard/medication-prescribing-workspace.tsxL267-L290
Reconciled answer-view and search-refine controls with main’s responsive min-h-tap / desktop sizing updates. src/components/clinical-dashboard/clinical-output-helpers.tsxL186-L190 src/components/clinical-dashboard/master-search-header.tsxL1063-L1069 src/components/clinical-dashboard/master-search-header.tsxL1083-L1089
Preserved mode-home type-scale and no-wrap quick-link/action button polish while keeping main’s responsive tap sizing. src/components/mode-home-template.tsxL192-L198 src/components/mode-home-template.tsxL247-L252 src/components/mode-home-template.tsxL317-L318
Created the required PR record with title: “Resolve PR merge conflicts against main.”

Testing

✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm ci
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run typecheck
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run lint
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run test
⚠️ npm run typecheck initially failed before setup because node_modules was absent and the shell resolved Node 20 instead of the repo-required Node 24.
❌ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run test -- --runInBand failed because Vitest does not support Jest’s --runInBand flag; reran the standard test command successfully.

View task →

coderabbitai · 2026-07-11T14:35:56Z

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

❌ Cannot run autofix: This PR has merge conflicts.

Please resolve the conflicts with the base branch and try again.

Alternatively, use @coderabbitai resolve merge conflict to automatically resolve the conflicts.

BigSimmo · 2026-07-11T14:36:43Z

@copilot resolve the merge conflicts on this branch.

coderabbitai · 2026-07-11T14:45:07Z

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

❌ Cannot run autofix: This PR has merge conflicts.

Please resolve the conflicts with the base branch and try again.

Alternatively, use @coderabbitai resolve merge conflict to automatically resolve the conflicts.

coderabbitai · 2026-07-11T14:51:54Z

Note

Docstrings generation - SKIPPED
Skipped regeneration as there are no new commits. Docstrings already generated for this pull request at #503.

@BigSimmo

Docstrings generation was requested by @BigSimmo. * #494 (comment) The following files were modified: * `src/components/DocumentTagCloud.tsx` * `src/components/applications-launcher-page.tsx` * `src/components/clinical-dashboard/favourites-command-library-page.tsx` * `src/components/clinical-dashboard/favourites-library-nav.tsx` * `src/components/differentials/differential-detail-page.tsx` * `src/components/services/service-detail-page.tsx`

BigSimmo · 2026-07-11T15:19:46Z

@codex please can you fix the failing CI testing for me

$comment

chatgpt-codex-connector · 2026-07-11T15:30:51Z

Summary

Added a focused CI regression test proving anonymous paid-answer rate limiting fails closed in production when the durable limiter returns an invalid payload, even if an in-memory fallback is requested. tests/api-rate-limit-fallback.test.tsL46-L64
Added coverage proving anonymous requests with no trusted network identity share a single conservative quota rather than allowing caller-controlled user-agent rotation to partition quotas. tests/public-api-access.test.tsL13-L19 tests/public-api-access.test.tsL36-L41
Committed the changes on the current branch with commit 33e3b78 (test: cover anonymous answer rate-limit safeguards) and created the PR record titled “Cover anonymous answer rate-limit CI safeguards.”

Testing

✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm ci
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run verify:cheap
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run test -- tests/api-rate-limit-fallback.test.ts tests/public-api-access.test.ts --reporter=dot
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run typecheck
✅ source ~/.nvm/nvm.sh && nvm use 24.18.0 >/dev/null && npm run lint

View task →

…n taps Rebuilt on top of #483's redesigned interactive detail page (which already fixed the wrapping action labels and tab-label wrap). Remaining polish: - Add a .focus-ring-tab class (inset rounded ring: outline-offset -4px, no halo) so keyboard focus no longer draws a full-height box that collides with the tablist border; inactive tabs get a transparent bottom border to remove the 2px layout jump on tab switch. - Keep #483's roving-tabindex keyboard nav, nowrap and flex-1 layout intact. - shrink-0 on the desktop action cluster so the Save icon button stops being crushed below 44px at ~1024px; nowrap on the Compare button. - Bump the two overlap-diagnosis chips to the 44px tap standard. - Regression test: detail Save action >=44px at 1024px, Overview tab single-line with no page overflow at 320px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…on routes Still-present defects confirmed by a fresh sweep of current main (15 routes x 7 widths); none were addressed by recent main changes: - DocumentTagCloud: drop the focus: ring classes that painted a ring on mouse click; the global :focus-visible rule keeps the keyboard ring. - applications launcher category filters: mobile 28px / desktop 36px -> 44px, with whitespace-nowrap. - service detail Copy row buttons: 40px -> 44px. - favourites command-library More-actions buttons and library sidebar rows and compact toggle: 36px -> 44px. Deliberately left main's intentional lg:min-h-9 desktop density on the mode-home quick-link pills (AA-compliant for pointer). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…g home The MedicationHome actions hardcoded description: "Prescribing-focused search." for every prompt, ignoring the authored `medicationPrompts[].description` values ("Check renal dosing…", "Review opioid-use…", "Check maximum dose…") that the prescribing-home responsive test asserts. Restore `description: prompt.description` so each card shows its specific guidance and the advisory UI regression passes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

BigSimmo · 2026-07-11T15:38:20Z

@coderabbitai review

coderabbitai · 2026-07-11T15:38:26Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

BigSimmo

ok

BigSimmo marked this pull request as ready for review July 11, 2026 14:19

coderabbitai Bot requested changes Jul 11, 2026

View reviewed changes

Comment thread tests/ui-tools.spec.ts Outdated

Copilot started work on behalf of BigSimmo July 11, 2026 14:36 View session

Copilot stopped work on behalf of BigSimmo due to an error July 11, 2026 14:39
402 {"error":{"message":"You've reached your additional usage limit for your plan. Go to https://github.com/settings/copilot/features for more details.","code":"additional_spend_limit_reached"}} (Requ...

BigSimmo enabled auto-merge (squash) July 11, 2026 14:44

BigSimmo force-pushed the claude/site-formatting-polish-b91374 branch from a0ba771 to 21f9540 Compare July 11, 2026 14:50

coderabbitai Bot mentioned this pull request Jul 11, 2026

📝 Add docstrings to claude/site-formatting-polish-b91374 #503

Merged

BigSimmo and others added 3 commits July 11, 2026 23:33

BigSimmo force-pushed the claude/site-formatting-polish-b91374 branch from 21f9540 to 619dd99 Compare July 11, 2026 15:37

BigSimmo commented Jul 11, 2026

View reviewed changes

coderabbitai Bot approved these changes Jul 11, 2026

View reviewed changes

BigSimmo merged commit 9ffc2a5 into main Jul 11, 2026
15 checks passed

coderabbitai Bot mentioned this pull request Jul 13, 2026

ci: make production-journey UI regression blocking, isolate mockup specs (PT-05) #592

Merged

This was referenced Jul 17, 2026

Fix clipped focus and mobile interaction states #689

Merged

Fix frontend a11y/layout audit findings: toggle-group + duplicate padding #708

Merged

Conversation

BigSimmo commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this is

Your two reported bugs

Repo-wide sweep

Verification

Scope / governance

Uh oh!

supabase Bot commented Jul 11, 2026

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 error, 1 warning, 1 inconclusive)

Uh oh!

BigSimmo commented Jul 11, 2026

Uh oh!

BigSimmo commented Jul 11, 2026

Uh oh!

coderabbitai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Jul 11, 2026

Summary

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BigSimmo commented Jul 11, 2026

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BigSimmo commented Jul 11, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jul 11, 2026

Summary

Uh oh!

BigSimmo commented Jul 11, 2026

Uh oh!

coderabbitai Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BigSimmo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BigSimmo commented Jul 11, 2026 •

edited

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

coderabbitai Bot left a comment •

edited

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading