[web] Bound mobile navigation - #2299
Conversation
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (8)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Reviewer's GuideReplaces in-flow small-screen navigation in AppHeader with a bounded, accessible modal top sheet, wires it to close on multiple interactions including breakpoint changes, and adds focused unit, Cypress, Storybook, and shared jsdom matchMedia coverage for the new behavior. Sequence diagram for bounded mobile navigation open/close behaviorsequenceDiagram
actor User
participant AppHeader
participant ModalDialog
participant Window
User->>AppHeader: click Toggle navigation menu (button)
AppHeader->>AppHeader: setMenuOpen(true)
AppHeader->>ModalDialog: render ModalDialog open=true initialFocusRef=firstMobileLinkRef
ModalDialog-->>User: move focus to firstMobileLinkRef
User->>ModalDialog: click link (Link onClick)
ModalDialog->>AppHeader: Link onClick
AppHeader->>AppHeader: setMenuOpen(false)
AppHeader->>ModalDialog: render ModalDialog open=false
User->>ModalDialog: press Escape
ModalDialog->>AppHeader: onClose()
AppHeader->>AppHeader: setMenuOpen(false)
ModalDialog-->>User: restore focus to Toggle navigation menu
AppHeader->>Window: matchMedia("(min-width: 64rem)")
Window-->>AppHeader: MediaQueryList
AppHeader->>Window: addEventListener(change, closeAtDesktopBreakpoint)
User->>Window: resize viewport to desktop
Window->>AppHeader: closeAtDesktopBreakpoint()
AppHeader->>AppHeader: setMenuOpen(false)
AppHeader->>ModalDialog: render ModalDialog open=false
File-Level Changes
Assessment against linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
PR Summary by QodoFix mobile navigation to use bounded top-sheet modal (no page displacement)
AI Description
Diagram
High-Level Assessment
Files changed (6)
|
|
Storybook previews for This comment updates automatically on each PR push. |
Code Review by Qodo
Context used✅ Compliance rules (platform):
178 rules✅ Skills:
fix-provider, write-tests, cloudflare 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
commented
Jul 29, 2026
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
1 similar comment
commented
Jul 29, 2026
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
commented
Jul 29, 2026
|
CI E2E failure diagnosed and fixed in da66b30.
Validation after the fix:
The new CI run is the authoritative E2E confirmation. |
commented
Jul 29, 2026
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
commented
Jul 29, 2026
|
Follow-up root-cause evidence for the residual 20 px CI scroll:\n\n- On |
16bd0f0 to
f307e45
Compare
commented
Jul 29, 2026
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
commented
Jul 29, 2026
|
Rebased onto current |
Summary
ModalDialogtop sheetmatchMediastubRoot cause
The small-screen links were rendered inside the header's normal document flow. Expanding the menu therefore inserted every destination above the page content, turning the header and route content into one long mixed page.
Mobile parity
The native app already uses five fixed bottom tabs and has no expandable navigation equivalent, so no native mobile behavior changes are needed.
Validation
pnpm exec vitest run --project unit packages/web --reporter=dot— 166 files, 1,204 tests passedpnpm exec vitest run --project unit --project mobile --reporter=dot— 942 files passed, 2 skipped; 14,597 tests passed, 21 skippedpnpm --dir packages/web typecheckpnpm --dir packages/server typecheckpnpm tsc --noEmitpnpm lint— passed with an isolated current-worktree ClickHouse serviceLocal Cypress execution was attempted twice through the unchanged
pnpm e2e:web:upworkflow, but Docker infrastructure prevented the test environment from starting:issue-2188-e2e_default:all predefined address pools have been fully subnetted.pnpm install --force --frozen-lockfile. The first fatal line was[ERR_PNPM_BROKEN_METADATA_JSON] The operation was aborted due to timeoutafter prolonged npm registry metadata requests.The unchanged CI E2E job is therefore required as the authoritative Cypress validation before merge.
Fixes #2188
Summary by Sourcery
Bound the small-screen web navigation inside an accessible modal sheet so opening the menu no longer displaces page content and closes appropriately across viewports.
New Features:
Bug Fixes:
Enhancements:
Documentation:
Tests:
Summary by cubic
Bound the small-screen navigation in a scroll-bounded top-sheet
ModalDialogso it no longer pushes page content. It focuses the first link, traps/restores focus with preventScroll, and closes on selection, Escape, outside pointer, and when switching to desktop; fixes #2188.ModalDialogthat has independent scroll, prevents scroll jumps on focus, full-width tappable links, and an explicit Close.lgbreakpoint viamatchMedia, then focus the first desktop link; desktop sidebar unchanged.ModalDialogto be opt-in via pointer events; mobile navigation opts in.matchMediastub; added a short TDD plan doc.Written for commit f307e45. Summary will update on new commits.