Skip to content

feat(guide): pin guide chrome controls to shared scroll-hide behavior - #2007

Merged
BigSimmo merged 17 commits into
mainfrom
codex/guide-search-chrome-20260815
Aug 17, 2026
Merged

feat(guide): pin guide chrome controls to shared scroll-hide behavior#2007
BigSimmo merged 17 commits into
mainfrom
codex/guide-search-chrome-20260815

Conversation

@BigSimmo

@BigSimmoBigSimmo commented Aug 16, 2026

Copy link
Copy Markdown
Owner

Summary

  • move guide universal search to the fixed bottom chrome in guide mode and make it scroll-hide with the header
  • place guided tour action above the universal search in the footer
  • pin Guide Home / Guided Tour / All Topics controls to the top header and make them hide together with the footer
  • refine shared search/chrome interactions to preserve shared scroll-hide behavior and zero hidden reserves

Checks

  • npm run workflow:design-sweep -- --write-evidence
  • npm run ensure (identity verified)
  • npm run test -- tests/guide-centre.dom.test.tsx tests/guide-centre.test.ts
  • npm run typecheck

Summary by CodeRabbit

  • New Features

    • Guide Centre mobile header and footer now smoothly hide while scrolling and restore when returning to the top.
    • Search and navigation controls remain coordinated with the responsive dialog chrome.
    • Improved safe-area handling and content spacing on mobile devices.
  • Bug Fixes

    • Hidden controls are removed from keyboard navigation for improved accessibility.
    • Updated visual styling prevents unwanted layout transitions and deprecated elevation effects.
  • Tests

    • Added coverage for mobile scrolling, control accessibility, responsive spacing, and design styling.

@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

@supabase

supabaseBot commented Aug 16, 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 ↗︎.

@coderabbitai

coderabbitaiBot commented Aug 16, 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:14 minutes

Limit details: You’ve used all 1 included review currently available under your plan. You completed 93 included PR reviews in the past 7 days; at that activity level, included reviews refill 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?

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: e4f11683-23ca-413e-9089-0108ef574bd3

📥 Commits

Reviewing files that changed from the base of the PR and between 5af71dc and 5dd57ff.

📒 Files selected for processing (6)
  • .design-sync/config.json
  • docs/branch-review-records/d9883c1c107d462f6ba5bf9e1447b570eb90fa0026059959a4ca253be147df3a.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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 85ac4961-d86f-4f57-9f5a-8d09c6f87c88

📥 Commits

Reviewing files that changed from the base of the PR and between 3f33068 and 5af71dc.

📒 Files selected for processing (7)
  • docs/branch-review-records/69f8c9afc87b9d9cc96b53a279a21343d9958028c10817d02e7c975f91014522.record.md
  • docs/branch-review-records/6cdaa052c37673355af42b196c2bb613fd5ed4615778a6e59fa3c4e010706922.record.md
  • src/components/clinical-dashboard/guide-dialog.tsx
  • src/components/ui/sheet.tsx
  • tests/guide-centre-chrome.spec.ts
  • tests/guide-centre-design-contract.dom.test.tsx
  • tests/guide-centre.dom.test.tsx

Included review availability: 0 reviews are currently available. Based on recent review activity, included reviews refill at 1 per hour.


📝 Walkthrough

Walkthrough

GuideDialog now uses shared scroll-driven chrome collapse. Sheet supports hidden headers and bottom content. Mobile search moves into the footer dock. Tests cover visibility, accessibility, layout padding, transitions, and restoration.

Changes

Guide Centre chrome

Layer / File(s)Summary
Sheet chrome contract
src/components/ui/sheet.tsx
Sheet exposes header content, visibility, and ref props. Hidden headers become inert and aria-hidden, while safe-area classes apply only when visible.
Guide scroll chrome flow
src/components/clinical-dashboard/guide-dialog.tsx
GuideDialog reports shared collapse metrics, tracks search focus, blurs search during scrolling, and coordinates header, footer, search, and content spacing.
Chrome behavior validation and records
tests/guide-centre-chrome.spec.ts, tests/guide-centre-design-contract.dom.test.tsx, tests/guide-centre.dom.test.tsx, docs/branch-review-records/*
Tests verify mobile chrome transitions, accessibility state, layout padding, safe-area behavior, and restoration. Branch review records document validation.
Estimated code review effort: 3 (Moderate)~25 minutes

Merge Risk:⚪ Minimal · up to 5af71

The PR is merge-ready after normal checks and review; no actionable merge-blocking risk remains. The final summary should include the decisive verification output line.

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly identifies the main change: shared scroll-hide behavior for guide chrome controls.
Description check✅ PassedThe description clearly summarizes the UI changes and lists relevant verification commands, but it omits the template's exact Verification heading and required gate evidence.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/guide-search-chrome-20260815

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

@BigSimmo
BigSimmo enabled auto-merge (squash) August 16, 2026 13:25
@github-actions

github-actionsBot commented Aug 16, 2026

Copy link
Copy Markdown
Contributor

CI triage

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

  • Unit coverageneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • Production UI (1)needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • Static PR checksneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredmain-side: the same job also failed on the latest completed main CI run.

Compared with main CI run #11238 (failure).

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

@BigSimmo
BigSimmo disabled auto-merge August 17, 2026 08:33
BigSimmoand others added 4 commits August 17, 2026 16:33
Static PR checks: format tests/guide-centre.dom.test.tsx (missing
trailing newline).
Unit coverage (design-sync-contract, design-sync-visual-exports):
regenerate .design-sync/config.json - Sheet gained headerBottom,
headerHidden, and headerRef props that were never synced.
Unit coverage (guide-centre.dom.test.tsx): the shared
useScrollHideReporter hook schedules an rAF-deferred hide-state
reset on mount. A synchronous test scroll immediately after render
could race that reset and silently revert the hide state between
the footer and header assertions. Flush the pending frame before
the first scroll, matching the pattern this file's own afterEach
already uses.
Production UI (ui-smoke.spec.ts): the pre-existing (PR-untouched)
guide accessibility test scrolled 80px, clearing the old
footer-only hide threshold but not the shared hook's 72px + 24px
activation threshold now governing both header and footer. Bumped
to 140px to match the PR's own new tests, and:
- the tab-order check previously started from "Close guide", which
now lives inside the header and is unfocusable while it's inert -
swapped to a content control, matching the PR's own new
guide-centre-chrome.spec.ts.
- moving the guided-tour "Continue" action out of the scrollable
body and into the fixed footer means the scroll body can render
with no focusable descendant on some tour steps, tripping axe's
scrollable-region-focusable rule. Added an opt-in bodyTabIndex
prop to Sheet (default off, so no other Sheet consumer is
affected) and set it for the guide dialog's scroll body.
Note for follow-up (not blocking this PR): tests/guide-centre-chrome.spec.ts,
also added by this PR, isn't matched by playwright.config.ts's
testMatch allowlist and therefore never runs in CI.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HR7cnmJRWZyg2Q9MFV1SCs
@BigSimmo
BigSimmo enabled auto-merge August 17, 2026 08:39
@BigSimmo
BigSimmo merged commit 56ef865 into mainAug 17, 2026
26 checks passed
@BigSimmo
BigSimmo deleted the codex/guide-search-chrome-20260815 branch August 17, 2026 08:56
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