Improve Guide Centre mobile UX: verification preview, scrolling, and edge-to-edge footer

[BigSimmo]

Motivation

• The guide centre UI used a placeholder “Answer preview”, had awkward step layout on small screens, and the bottom action bar did not reliably hide/restore on scroll nor honor safe-area insets, which hurt mobile UX and discoverability.
• The Sheet component lacked a small API for callers to observe body scroll events or wire a body ref, forcing brittle DOM workarounds.

Description

• Replace the empty “Answer preview” with a meaningful illustrative answer and inline citation examples and convert the verification steps into a compact responsive layout that stacks on desktop and lays out more clearly on narrow viewports (src/components/clinical-dashboard/guide-dialog.tsx).
• Add a body scroll ref and scroll callback plus a footer-class hook to the shared Sheet component so callers can observe scroll and animate/hide the footer safely (src/components/ui/sheet.tsx).
• Wire the guide dialog to use the new Sheet APIs: reset the guide scroll on navigation, track scroll delta to hide/show the mobile footer, keep safe-area padding for the header, and make the bottom action bar edge-to-edge and dismiss on downward scroll (src/components/clinical-dashboard/guide-dialog.tsx).
• Add a DOM unit test that asserts the verification example is present and that the mobile tour action footer hides when the guide body is scrolled and returns when scrolled back (tests/guide-centre.dom.test.tsx).
• Small automated-review record added to docs/branch-review-records/73e1ce27d354653c23fc961f40f9d63232cd9e2adbed6433ed8cb4e2e04eb3aa.record.md.

Testing

• Ran the repo design sweep (npm run workflow:design-sweep -- --write-evidence) and npm run ensure to bring up the local app for interactive checks, which reported the app at http://localhost:3131.
• Unit/dom tests: npx vitest run tests/guide-centre.dom.test.tsx (the focused DOM suite for the guide) — 9 tests passed.
• End-to-end: npm run test:e2e (Playwright via repo script) running the Chromium smoke assertion that covers the guide journey — the targeted smoke test passed (1 test, ~11.5s).
• Type checking: npm run typecheck completed successfully with no errors.
• Formatting: npm run format was run and completed.
• Manual/browser: captured a 390×844 screenshot and exercised the guide dialog in Chromium to confirm the mobile footer hides on downward scroll and reappears when scrolling up; this manual check succeeded and was recorded in the review notes.

Files changed (key):

• src/components/clinical-dashboard/guide-dialog.tsx — responsive verification content, scroll handling, footer hide/restore, safe-area adjustments.
• src/components/ui/sheet.tsx — added bodyRef, onBodyScroll, and footerClassName props and wiring.
• tests/guide-centre.dom.test.tsx — added assertions for the illustrative verification example and mobile footer hide/restore.
• docs/branch-review-records/...record.md — review record added.

Notes/CI: commits were created locally (Improve guide centre mobile experience and Record guide centre review) and tests were executed via repository scripts; pushing the branch to the remote failed in this environment because GitHub credentials were not available, so no remote PR was created from this session.

---

Codex Task

[coderabbitai]

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:9 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: 88e36a22-514a-4e94-98a6-baa06b13b211

📥 Commits

Reviewing files that changed from the base of the PR and between 73d7321 and a804eb2.

📒 Files selected for processing (7)

• .design-sync/config.json
• docs/branch-review-records/05b6c633adabd9647962f315da24d8e079183c4c8cd7d6d8303dba20a80489f4.record.md
• docs/branch-review-records/73e1ce27d354653c23fc961f40f9d63232cd9e2adbed6433ed8cb4e2e04eb3aa.record.md
• src/components/clinical-dashboard/guide-dialog.tsx
• src/components/ui/sheet.tsx
• tests/guide-centre.dom.test.tsx
• tests/ui-smoke.spec.ts

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:983563acda

ℹ️ 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".

[BigSimmo]

@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. The only repository destination is BigSimmo/Database, and the only branch destination is the pull request head branch codex/improve-guide-layout-and-fix-bugs at starting commit 983563a; never publish fixes to a detached or synthetic work branch and never create a stacked pull request. Use the authenticated GitHub connector to commit each approved fix to BigSimmo/Database:codex/improve-guide-layout-and-fix-bugs, then verify that the pull request head contains the published commit before reporting success. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. For a fixed thread, reply with as the first line and as the second line. For a no-code disposition, use followed by . These result markers authorize the workflow to close that exact thread only after it verifies a fixed commit is the pull request head; a local-only commit is not a fix. If publication or verification fails, do not use either result marker, do not claim success, and leave the thread open with the blocker. If human input or new authorization is required, do the same. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation.

[github-actions]

CI triage

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

• Production UI (1) — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #10852 (cancelled).

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

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. 🚀

Reviewed commit:983563acda

ℹ️ 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".

[BigSimmo]

Final review-and-fix summary — PR #1948

Final PR head: a804eb28390341c2aae8d2c8f8013f431c528cc3
Final base before merge: main@73d73210c45bc81a85f06e94d8e49236fe44a640
External merge commit: d68a9fce750f6e5e582169c99ab2dd35fceeb3a8

The branch was updated through normal base merges with clean merge trees. It was then merged externally; Codex did not merge or alter auto-merge.

Fixed:

• Hidden phone-only Guide footer is excluded from keyboard/assistive-technology navigation (inert + aria-hidden) and its reserved content padding is reclaimed while hidden.
• Desktop behavior remains accessible; focused DOM and browser coverage exercises hide/restore and focus exclusion.
• Corrected the test-only MediaQueryList cast and updated the affected Sheet design-sync metadata.
• Both actionable P2 threads were replied to and resolved. The immutable review record accompanied the real fix.

Adversarial review: distinct manual pass of Sheet containment, scroll state, mobile/desktop accessibility contract, and final diff (no independent external reviewer available).

Local verification: Prettier, git diff --check, maintainability budget, and base-freshness checks passed. Focused Vitest/design-sync generation were unavailable in the isolated worktree because dependencies were absent; exact CI provided coverage.

Exact-head CI is green: PR required, Build, Static PR checks, Unit coverage, Safety/config, Change scope, all Production UI shards/critical, Lighthouse budget, PR mergeability/policy, Semgrep, Gitleaks, GitGuardian, SAST, and secret scan passed. Expected non-applicable/advisory jobs were skipped. No actionable threads or residual blockers remain.

This PR was merged externally; Codex did not perform the merge.

[BigSimmo]

Final PR summary — reviewed head a804eb28390341c2aae8d2c8f8013f431c528cc3, base 73d73210c45bc81a85f06e94d8e49236fe44a640; GitHub externally squash-merged it as d68a9fce750f6e5e582169c99ab2dd35fceeb3a8 while this sweep was taking its initial snapshot. The merge tree was clean and both actionable accessibility/layout threads were resolved. Exact-head required CI, Secret Scan, and SAST all succeeded; no advisory failures or outstanding blockers were found. No changes were made by this sweep, and no new independent reviewer run was possible before external merge. Codex did not merge this PR.