feat(site): add responsive table of contents rail - #1858
Merged
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| return () => { | ||
| window.removeEventListener('resize', updateViewportLayout); | ||
| window.visualViewport?.removeEventListener('resize', updateViewportLayout); | ||
| }; |
There was a problem hiding this comment.
Visual viewport ignored in layout
Medium Severity
The mobile TOC layout registers a visualViewport resize listener but computes railTop and availableHeight only from window.innerHeight. When the visible viewport shrinks (mobile browser chrome, on-screen keyboard), the rail can sit off-screen and the popover maxHeight can exceed what users can actually see.
Reviewed by Cursor Bugbot for commit a52d972. Configure here.
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (10)
Players (5)
Skins (30)
UI Components (39)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (9)
Skins (27)
UI Components (33)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (68)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (11)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 63d85ee. Configure here.
| window.addEventListener('scroll', closeOnDocumentScroll, { passive: true }); | ||
|
|
||
| return () => window.removeEventListener('scroll', closeOnDocumentScroll); | ||
| }, [open]); |
There was a problem hiding this comment.
Popover closes on inner scroll
Medium Severity
While the TOC popover is open, a window scroll listener always calls setOpen(false). Scrolling over the popup still moves the document when the list does not overflow or when scroll chaining hits the end of overflow-y-auto, so the popover can dismiss during normal TOC interaction.
Reviewed by Cursor Bugbot for commit 63d85ee. Configure here.
sampotts
approved these changes
Jul 22, 2026
|
|
||
| return ( | ||
| <nav ref={navRef} className={clsx('', className)}> | ||
| <nav ref={navRef} aria-label="On this page" className={clsx('', className)}> |
Collaborator
There was a problem hiding this comment.
nit: className={className} ?
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.
Summary
Replace the mobile and tablet docs table-of-contents select with a notion-style stripe rail that keeps document position visible without consuming vertical space. Tapping the rail opens the existing desktop table of contents in an accessible popover.
Screenshots
Note
Low Risk
Docs-site UI and navigation only; behavior is covered by unit tests for rail geometry with no auth or data changes.
Overview
Replaces the mobile/tablet docs TOC dropdown with a fixed left-edge stripe rail that reflects heading depth and the active section; tapping it opens the same desktop TOC list in a Base UI popover (closes on scroll, resize, and at the
xlbreakpoint).Adds
calculateRailGeometry(with Vitest coverage) so rail stripes compress to fit the viewport, plusstarting-style/ending-styleTailwind variants for popover enter/exit. Desktop TOC gainsaria-labelandaria-current="location"on the active link.The docs framework page drops the dedicated mobile TOC grid row and related
--mobile-toc-h/--scroll-mtlayout variables now that the rail no longer consumes vertical space.Reviewed by Cursor Bugbot for commit 63d85ee. Bugbot is set up for automated code reviews on this repo. Configure here.