fix: align wide docs layout to main content area, not viewport#11
Merged
Conversation
The .docs-story-embed and .docs-example-page--wide rules used 100vw-based widths with margin-left: 50% + translateX(-50%) to center wide elements. This broke at desktop widths because: 1. Starlight's unlayered styles override margin-left inside @layer starlight.components, resolving it to 0px instead of 50%. 2. With margin-left=0, translateX(-50%) centres the element on the left edge of .sl-markdown-content, not on main's centre — causing the element to extend ~360px behind the left sidebar. Fix: remove margin-left: 50% and compute the full correction in transform. The translateX now shifts by (-50% + half the content-column width), which places the element centre exactly at the main content area centre regardless of sidebar presence. Width is capped to 100vw - sidebar - 4rem so it never overflows into the sidebar. Inside .docs-example-page--wide the embed just fills its container (width: 100%; transform: none). Closes #8
- Add ?expandable to iframe src so the viewer's own expand button is shown - Remove the <a class=docs-story-popout> anchor from the MDX - Remove .docs-story-popout CSS rules and the padding-top on .docs-story-frame that only existed to make room for the external button
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
1 participant
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.
Fixes the vLLM example page sliding behind the left sidebar on wide desktop viewports, and tightens the max-width so the embed has comfortable margins.
Root cause
The .docs-story-embed and .docs-example-page--wide rules used 100vw-based widths with margin-left: 50% + translateX(-50%) to center wide elements. This broke at desktop widths for two reasons:
Fix
Verified at 1800px viewport
Before: .docs-example-page--wide at left=-41.5 (behind sidebar right=300), width=1448px filling 97% of main with no margins.
After: .docs-example-page--wide at left=403, right=1683, width=1280px with 103px symmetric margins inside main (left=300, right=1785).
Closes #8