Skip to content

Update media queries to avoid horizontal scroll when side menu appears #17694

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

Open
coolguyzone wants to merge 1 commit into
base: master
Choose a base branch
from
+7 −0
Open

Update media queries to avoid horizontal scroll when side menu appears #17694

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
7 changes: 7 additions & 0 deletions src/components/docPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,13 @@ export async function DocPage({
max-width: var(--doc-content-w);
box-sizing: border-box;
}
/* When the TOC is visible but the full layout doesn't fit yet, shrink content
to fill available space rather than overflowing. */
@media (min-width: 1490px) and (max-width: 1649px) {
#doc-content {
max-width: calc(100vw - var(--sidebar-width, 300px) - var(--toc-w) - 2rem);
}
}
Copy link
Copy Markdown
Contributor

@cursor cursor Bot May 8, 2026

Choose a reason for hiding this comment

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

Media query shrinks content on pages without TOC

Medium Severity

The new media query unconditionally subtracts --toc-w (250px) from #doc-content max-width, but the TOC sidebar is only rendered when hasToc is true (line 63). On pages where hasToc is false (e.g., pages with notoc: true in frontmatter and no platform/guide), the content area is unnecessarily narrowed by 250px in the 1490–1649px viewport range, even though no TOC is taking up space.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 54d938b. Configure here.

Comment on lines +169 to +173
Copy link
Copy Markdown
Contributor

@sentry sentry Bot May 8, 2026

Choose a reason for hiding this comment

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

Bug: The new media query for #doc-content unconditionally subtracts the TOC width, even on pages without a TOC, causing a large empty gap on the right.
Severity: MEDIUM

Suggested Fix

The CSS rule that subtracts var(--toc-w) should only be applied when the Table of Contents is actually present. Consider adding a class like has-toc to a parent element when hasToc is true, and then scope the new CSS rule to that class (e.g., .has-toc #doc-content { ... }). This will ensure the layout adjustment only happens when needed.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: src/components/docPage/index.tsx#L169-L173

Potential issue: A new CSS media query for viewports between 1490px and 1649px
unconditionally subtracts `var(--toc-w)` (250px) from the `max-width` of the
`#doc-content` element. This rule is applied even when the Table of Contents is not
rendered (when `hasToc` is `false`), such as on pages with `notoc=true`. This results in
the main content area being unnecessarily narrow, leaving a large blank gap on the
right. This also incorrectly constrains pages with `fullWidth=true` due to the CSS ID
selector's higher specificity.

Did we get this right? 👍 / 👎 to inform future reviews.

/* Mobile responsive styles */
@media (max-width: 768px) {
.main-content {
Expand Down
Loading