Update media queries to avoid horizontal scroll when side menu appears#17694
Update media queries to avoid horizontal scroll when side menu appears#17694coolguyzone wants to merge 1 commit intomasterfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 54d938b. Configure here.
| #doc-content { | ||
| max-width: calc(100vw - var(--sidebar-width, 300px) - var(--toc-w) - 2rem); | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
Reviewed by Cursor Bugbot for commit 54d938b. Configure here.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| @media (min-width: 1490px) and (max-width: 1649px) { | ||
| #doc-content { | ||
| max-width: calc(100vw - var(--sidebar-width, 300px) - var(--toc-w) - 2rem); | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
sfanahata
left a comment
sfanahata
left a comment
There was a problem hiding this comment.
It works okay, but would be good to check out the bot feedback before merging @coolguyzone
2 participants
See https://sentry-docs-git-coolguyzone-fixscroll-bug.sentry.dev/platforms/android/logs/ at widths 1490+, there shouldn't be any more horizontal scrolling.
DESCRIBE YOUR PR
Tell us what you're changing and why. If your PR resolves an issue, please link it so it closes automatically.
IS YOUR CHANGE URGENT?
Help us prioritize incoming PRs by letting us know when the change needs to go live.
SLA
Thanks in advance for your help!
PRE-MERGE CHECKLIST
Make sure you've checked the following before merging your changes:
LEGAL BOILERPLATE
Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.
EXTRA RESOURCES