docs: make the docs site theme usable on mobile and narrow screens#7853
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: QUIET Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThe documentation theme adds a responsive sidenav toggle, updates header and sidebar markup, adjusts folded-layout behavior, and refines hero, heading-anchor, and mobile search styling. ChangesResponsive documentation theme
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Reader
participant SidenavToggle
participant SiteJS
participant Sidenav
Reader->>SidenavToggle: Click menu button
SidenavToggle->>SiteJS: Invoke click handler
SiteJS->>Sidenav: Toggle open class
SiteJS->>SidenavToggle: Update aria-expanded
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
A-docs
prrao87
marked this pull request as ready for review
July 20, 2026 14:22
prrao87
approved these changes
Jul 20, 2026
prrao87
left a comment
prrao87
left a comment
Contributor
There was a problem hiding this comment.
Tested on a small local window, looks good. Thanks for the fix!
wjones127
pushed a commit
that referenced
this pull request
Jul 21, 2026
…7853) <img width="439" height="699" alt="image" src="https://github.com/user-attachments/assets/a62876d0-d4bd-498f-b345-9631c35989c6" /> ## Why The custom "Lance Docs" theme introduced in #7821 was designed desktop-first: on phones and narrow windows the header overflows horizontally (the section tabs get squeezed to zero width while the non-shrinking action buttons push the page wider than the viewport), and the side navigation renders as a long static block above every article, forcing readers to scroll past the whole section index before reaching content. This makes the theme responsive: - Below 960px the header folds into two rows: brand plus icon-only actions on top ("Get started", the GitHub label, and the star count collapse away), with a horizontally scrollable section-tab row underneath. - The side navigation collapses behind a disclosure button labeled with the current section, so articles lead on mobile. - Anchor jumps now land clear of the sticky header (`scroll-margin-top`), the search overlay becomes an edge-to-edge sheet on small screens, and article headings, the footer, and the 404 page scale down. Verified in a real browser at 390px and 320px widths (home, docs pages, tables, code blocks, dark mode, search) and regression-checked the desktop layout, which is unchanged. (cherry picked from commit 0f6fd2e)
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.
Why
The custom "Lance Docs" theme introduced in #7821 was designed desktop-first: on phones and narrow windows the header overflows horizontally (the section tabs get squeezed to zero width while the non-shrinking action buttons push the page wider than the viewport), and the side navigation renders as a long static block above every article, forcing readers to scroll past the whole section index before reaching content.
This makes the theme responsive:
scroll-margin-top), the search overlay becomes an edge-to-edge sheet on small screens, and article headings, the footer, and the 404 page scale down.Verified in a real browser at 390px and 320px widths (home, docs pages, tables, code blocks, dark mode, search) and regression-checked the desktop layout, which is unchanged.