docs: make desktop sidebar width a true max#21
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![mogplex[bot]](https://avatars.githubusercontent.com/in/3107927?s=60&v=4){kind=small}
There was a problem hiding this comment.
Mogplex PR Review
Status: Attention needed
Small, focused CSS-only PR that converts the docs sidebar from a fixed-width column to a fit-content(270px) shrink-to-content layout. The intent is clear and the implementation is reasonable, but there are two issues worth flagging: a potentially unintended !important on a custom property override, and a subtle mismatch between the CSS Grid track width and the sidebar's own inline-size, which can cause the content area to not expand as expected when the sidebar is narrower than 270px.
2 findings were added inline.
| #nd-docs-layout { | ||
| /* Fumadocs switches from drawer to full sidebar at 768px; prefer the normal 270px width and only shrink slightly on the narrowest desktop viewports. */ | ||
| --fd-sidebar-width: min(270px, 35vw); | ||
| /* Fumadocs sets the sidebar track inline; override it so desktop can shrink to content up to 270px instead of reserving a fixed column. */ |
There was a problem hiding this comment.
Warning: Grid track and sidebar inline-size can diverge, preventing content area from reclaiming space
The grid track --fd-sidebar-col is set to fit-content(270px), which means the column will shrink to the sidebar's actual rendered width. However, #nd-sidebar has inline-size: fit-content(270px) applied directly as an element style, which is resolved independently by the browser — the grid item's contribution to the track size is its min/max content size, not the track definition itself.
If Fumadocs sizes #nd-sidebar with its own internal styles (e.g., via a CSS variable), the track may not shrink as expected. The column track shrinks based on the grid item's content size, but if the item has an explicit inline-size applied, it may prevent the grid from reclaiming space correctly. Additionally, --fd-sidebar-width: 270px (a fixed value) is still set on #nd-docs-layout, so any Fumadocs internals that read this variable will see a fixed 270px, not the actual rendered width. Consider setting --fd-sidebar-width to fit-content(270px) here as well, matching the placeholder override.
| /* Fumadocs switches from drawer to full sidebar at 768px; prefer the normal 270px width and only shrink slightly on the narrowest desktop viewports. */ | ||
| --fd-sidebar-width: min(270px, 35vw); | ||
| /* Fumadocs sets the sidebar track inline; override it so desktop can shrink to content up to 270px instead of reserving a fixed column. */ | ||
| --fd-sidebar-col: fit-content(270px) !important; |
There was a problem hiding this comment.
Suggestion: !important on a CSS custom property is non-standard and may be silently ignored
!important on a custom property declaration (e.g., --fd-sidebar-col: fit-content(270px) !important;) is technically valid per the CSS spec, but its specificity effect only applies to the cascade for that custom property — it does not force the resolved value into any var() consumer. If Fumadocs sets --fd-sidebar-col at the same or higher specificity on #nd-docs-layout, !important is the right tool. But if Fumadocs sets it on a lower-specificity selector (e.g., :root), the !important is unnecessary and adds fragility. It's worth verifying which Fumadocs selector defines this variable, and removing !important if selector specificity alone is sufficient.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 97636a4c54
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| /* Fumadocs switches from drawer to full sidebar at 768px; prefer the normal 270px width and only shrink slightly on the narrowest desktop viewports. */ | ||
| --fd-sidebar-width: min(270px, 35vw); | ||
| /* Fumadocs sets the sidebar track inline; override it so desktop can shrink to content up to 270px instead of reserving a fixed column. */ | ||
| --fd-sidebar-col: fit-content(270px) !important; |
There was a problem hiding this comment.
At desktop widths (@media (min-width: 768px)), this sets --fd-sidebar-col to fit-content(270px), but Fumadocs uses --fd-sidebar-col as the first argument of minmax(...) in the docs grid track definition. fit-content() is not a valid minmax() minimum, so the computed track sizing can become invalid and the desktop grid layout can break. Keep --fd-sidebar-col as a length/keyword value and apply fit-content() only in positions where grid syntax accepts it directly.
Useful? React with 👍 / 👎.
1 participant
Summary
Verification