fix(developer docs): Correcting width issues in developer docs for toc #15559
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| @media (min-width: 1490px) { | ||
| #doc-content { | ||
| /* Calculate max width: viewport - sidebar - TOC - gaps - padding */ | ||
| /* Leave room for: sidebar (300px) + TOC (250px) + gaps (48px) + padding (96px) */ | ||
| max-width: calc(100vw - 300px - 250px - 48px - 96px); |
There was a problem hiding this comment.
Bug: max-width calculation using 100vw includes scrollbar width, causing #doc-content to be too wide and potentially leading to horizontal overflow.
Severity: HIGH | Confidence: High
🔍 Detailed Analysis
The max-width calculation for #doc-content uses 100vw, which includes the width of the vertical scrollbar. When a vertical scrollbar is present, this causes the element to be approximately 15px wider than intended, leading to potential horizontal overflow, misalignment of layout elements like the TOC, and possible appearance of a horizontal scrollbar at the 1490px breakpoint.
💡 Suggested Fix
Avoid 100vw for width calculations when scrollbars are a concern. Consider using 100% relative to the parent container, min(100vw - scrollbar_width, ...) if supported, or calculating the available width with JavaScript.
🤖 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#L138-L142
Potential issue: The `max-width` calculation for `#doc-content` uses `100vw`, which
includes the width of the vertical scrollbar. When a vertical scrollbar is present, this
causes the element to be approximately 15px wider than intended, leading to potential
horizontal overflow, misalignment of layout elements like the TOC, and possible
appearance of a horizontal scrollbar at the `1490px` breakpoint.
Did we get this right? 👍 / 👎 to inform future reviews.
Reference_id: 2811448
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| /* Leave room for: sidebar (300px) + TOC (250px) + gaps (48px) + padding (96px) */ | ||
| max-width: calc(100vw - 300px - 250px - 48px - 96px); | ||
| } | ||
| } |
There was a problem hiding this comment.
Bug: Undefined CSS variable breaks sidebar positioning
The CSS at the 2057px breakpoint references var(--sidebar-width) which is never defined in the stylesheet, causing the left sidebar positioning calculation to fail. This would result in the sidebar not being positioned correctly at large viewports.
Lms24
left a comment
Lms24
left a comment
There was a problem hiding this comment.
LGTM on develop docs now, thanks!
| /* Leave room for: sidebar (300px) + TOC (250px) + gaps (48px) + padding (96px) */ | ||
| max-width: calc(100vw - 300px - 250px - 48px - 96px); | ||
| } | ||
| } |
There was a problem hiding this comment.
Bug: Incorrect padding value in width calculation
The media query calculation assumes 96px of horizontal padding, but the #doc-content element only has 48px from the px-6 Tailwind class (24px per side). This mismatch will cause the content to be constrained narrower than intended, reducing available space within the 1490px-2056px viewport range.
….com/getsentry/sentry-docs into feat/python-docs-nav-standardization * 'feat/python-docs-nav-standardization' of https://github.com/getsentry/sentry-docs: ref: Allign badges with Sentry’s in-product ones (#15561) feat: Document exporting from OTLP from shopify hydrogen storefronts (#15534) docs(size-analysis): Update sentry-android-gradle-plugin to 6.0.0-beta.2 (#15560) fix(developer docs): Correcting width issues in developer docs for toc (#15559) docs(feature-flag): add documentation for php feature flags (#15443) feat(python): Illustrate types of metrics (#15556) fix(dev-docs): Buffer fixes for logs and metrics (#15513) docs(sourcemaps): Remove mentions of `sentry-cli sourcemaps explain` (#15481) ref(develop/scopes): Clarify unit type for attributes (#15546) ref(develop/spans): Clarify span attribute `unit` and `type` types (#15547) docs(metrics): add upcoming SDKs to Metrics getting started page (#15545) doc(proguard): No inbound filters (#15543) getsentry/relay@9b19609
Fixing width issues by dynamically calculating width and allowing center content to reduce in size as needed to fit full width of TOC