feat(docs-platform): Add dropdown caret to breadcrumbs in mobile#18355
Draft
sfanahata wants to merge 13 commits into
Draft
feat(docs-platform): Add dropdown caret to breadcrumbs in mobile#18355sfanahata wants to merge 13 commits into
sfanahata wants to merge 13 commits into
Conversation
Opening the Kapa AI modal from the in-search suggestion left the mobile search overlay (and its body scroll lock) mounted underneath, so our lock and Kapa's own lock fought and Kapa's content couldn't scroll on mobile. Close the overlay before opening Kapa so Kapa owns the body scroll lock exclusively, and consolidate the ad-hoc body-overflow locks into a shared reference-counted useBodyScrollLock hook so overlays no longer clobber each other's (or Kapa's) lock. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…red value A captured previous value could be a third party's transient overflow:hidden (e.g. Kapa). Re-applying it on release would leave the page unscrollable. Clearing the inline style fails gracefully and is correct for this app, where body overflow is only ever a transient scroll lock. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The onAskAi handler only closed the search overlay, so if the sidebar was also open its body scroll lock survived into the Kapa modal and recreated the iOS scroll trap. Release every overlay's lock before Kapa opens via a shared closeSidebar helper (also dedupes the existing search-button logic). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The lock was released in a passive effect, whose ordering vs the requestAnimationFrame that opens Kapa is not guaranteed. If Kapa opened first, our later cleanup cleared body overflow and wiped Kapa's lock, re-trapping scroll on mobile. Release in a layout effect so it runs synchronously on commit, before the rAF. Also trims verbose comments. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The home-page hamburger overlay rendered fixed inset-0 but never locked body scroll, so the page scrolled behind it on mobile. Apply useBodyScrollLock for homeMobileNavOpen, mirroring the search/sidebar overlays, and close it on navigation and on resize to desktop so the lock can't be stranded. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
On subpages the mobile sidebar stacked all 11 top-level sections above the current section's page nav, pushing the scrollable nav far below the fold. Wrap the section list in a single collapsed 'Menu' disclosure so the page nav sits at the top; the active section is conveyed by the page nav heading, and tapping Menu reveals all sections. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…roll The home hamburger overlay had no internal scrolling, so on short screens its lower items were unreachable once body scroll was locked. Add overflow-y-auto + overscroll-contain to the overlay. Also lock overflow on the documentElement (the actual scroll container), not just body — body-only overflow doesn't stop overscroll/rubber-band chaining to the page at the scroll bounds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Locking overflow stops normal scroll but not iOS overscroll/rubber-band, which drags the page behind a fixed overlay and visually detaches it from the header at the scroll bounds. Set overscroll-behavior:none on the documentElement in the scroll lock, and on the home nav overlay itself. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
With the section menu expanded on short screens, the fixed overflow:hidden sidebar and its inner scroll region fought over the height, so the page nav below the menu was unreachable. On mobile, scroll the whole sidebar and let the inner nav regions grow naturally so the menu and page nav scroll together. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The mobile .toc override sat in an earlier block with equal specificity to the later base .sidebar .toc rule, so the base flex:1/overflow:auto won on cascade and platform/develop sidebars kept a nested inner scroll. Move the mobile overrides into the base .toc and .sidebar-main blocks so they apply at <768px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Use overscroll-behavior: contain on the open mobile sidebar so it keeps the natural overscroll/bounce at its bounds while still preventing scroll chaining to the page behind. `none` killed the bounce (felt locked). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Each breadcrumb segment that has visible child pages now shows a small chevron-down caret. Clicking it opens a Radix Popover listing the child pages, making it easier to navigate the doc tree—especially on mobile where the sidebar may be hidden.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
sfanahata
changed the title
Base automatically changed from
sergical/fix/mobile-kapa-modal-scroll-lock
to
master
June 10, 2026 17:00
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DESCRIBE YOUR PR
Adds a dropdown caret to breadcrumb segments that have child pages. Clicking the chevron opens a Radix Popover listing child pages under that section, making it easier to navigate the doc tree -- especially on mobile where the sidebar is hidden.
Built on top of #18325.
Changes:
utils.ts: ExtendedbuildBreadcrumbs()to include visible children for each breadcrumb nodeindex.tsx: AddedBreadcrumbDropdowncomponent using Radix Popover (already a project dependency)style.module.scss: Styling for the dropdown trigger, popover, and animationsIS YOUR CHANGE URGENT?
PRE-MERGE CHECKLIST