Skip to content

docs: make desktop sidebar width a true max #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlesrhoward merged 1 commit into from
Apr 23, 2026
Merged

docs: make desktop sidebar width a true max #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,19 @@ html > body[data-scroll-locked] {

@media (min-width: 768px) {
#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. */
Copy link
Copy Markdown

@mogplex mogplex Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

--fd-sidebar-col: fit-content(270px) !important;
Copy link
Copy Markdown

@mogplex mogplex Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use a valid minmax()-compatible sidebar column value

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 👍 / 👎.

--fd-sidebar-width: 270px;
}

#nd-docs-layout [data-sidebar-placeholder] {
--fd-sidebar-width: fit-content(270px);
max-inline-size: 270px;
}

#nd-docs-layout #nd-sidebar {
inline-size: fit-content(270px);
max-inline-size: 270px;
}

/* Fumadocs still mounts the collapsed-panel shell on desktop; keep it hidden. */
Expand Down