Fix sidebar padding under Mintlify's new prod sidebar markup#696
Conversation
…bar markup Production Mintlify now renders #navigation-items as a base-ui scroll-area wrapper: the px-7/py-6 padding moved to an inner viewport div, the ul#sidebar-group id was dropped (class remains), and group titles became h3.sidebar-title. Our padding override was stacking 24px on the wrapper on top of the viewport's own 28px, doubling the sidebar inset. - Zero out padding on the scroll-area wrapper and apply 24px to the viewport - Add scroll-area-content fallback for the .text-sm container rule - Swap #sidebar-group id selectors to .sidebar-group class (matches both old CLI markup and new prod markup) - Cover h3.sidebar-title in the group label rules Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
Greptile SummaryThis PR updates
Confidence Score: 4/5Safe to merge — changes are CSS-only overrides that degrade gracefully if selectors don't match. The bulk of the change is a straightforward mechanical selector swap that is low risk. The scroll-area padding split correctly prevents double-stacking. Two minor issues: a duplicate mobile-nav selector is dead code, and the base flex properties on the wrapper are not explicitly reset in the scroll-area override block. mintlify/style.css — specifically the scroll-area override block (lines 888–894) and the mobile nav selector list (lines 864–867).
|
| Filename | Overview |
|---|---|
| mintlify/style.css | Large mechanical swap of ~79 #sidebar-group id selectors to .sidebar-group class selectors, plus new scroll-area padding rules and h3.sidebar-title coverage; one duplicate mobile-nav selector and an unreviewed flex-layout interaction on the scroll-area wrapper are minor concerns. |
Comments Outside Diff (1)
-
mintlify/style.css, line 873-894 (link)Flex layout not reset on scroll-area wrapper
The base
#navigation-itemsrule forcesdisplay: flex,flex-direction: column, andgap: 0with!important. The new scroll-area override only resetspadding— those flex properties remain on the wrapper element in the new markup. If base-ui's scroll-area relies on its own positioning or block layout for the viewport + scrollbar children, applyingdisplay: flexto the wrapper can cause the scrollbar overlay to mis-position or the viewport to collapse. If production looks correct now, it's worth adding an explicit reset (display: block !importantor equivalent) to the scroll-area override rule so the intent is clear and future Mintlify updates don't silently break it.Prompt To Fix With AI
This is a comment left during a code review. Path: mintlify/style.css Line: 873-894 Comment: **Flex layout not reset on scroll-area wrapper** The base `#navigation-items` rule forces `display: flex`, `flex-direction: column`, and `gap: 0` with `!important`. The new scroll-area override only resets `padding` — those flex properties remain on the wrapper element in the new markup. If base-ui's scroll-area relies on its own positioning or block layout for the viewport + scrollbar children, applying `display: flex` to the wrapper can cause the scrollbar overlay to mis-position or the viewport to collapse. If production looks correct now, it's worth adding an explicit reset (`display: block !important` or equivalent) to the scroll-area override rule so the intent is clear and future Mintlify updates don't silently break it. How can I resolve this? If you propose a fix, please make it concise.
Prompt To Fix All With AI
Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 2
mintlify/style.css:864-867
The conversion of `div#mobile-nav ul#sidebar-group` to `div#mobile-nav ul.sidebar-group` created an exact duplicate of the line immediately above it. Both entries now target the same selector, so the second line provides no additional coverage. Since the PR description confirms `.sidebar-group` class is present in both old and new markup, a single class selector is sufficient — but the duplicate is dead weight that will cause confusion if the selector list ever needs to be extended.
```suggestion
/* Mobile nav - sidebar group list: adjust spacing */
div#mobile-nav ul.sidebar-group,
#mobile-nav .sidebar-group-header + ul {
```
### Issue 2 of 2
mintlify/style.css:873-894
**Flex layout not reset on scroll-area wrapper**
The base `#navigation-items` rule forces `display: flex`, `flex-direction: column`, and `gap: 0` with `!important`. The new scroll-area override only resets `padding` — those flex properties remain on the wrapper element in the new markup. If base-ui's scroll-area relies on its own positioning or block layout for the viewport + scrollbar children, applying `display: flex` to the wrapper can cause the scrollbar overlay to mis-position or the viewport to collapse. If production looks correct now, it's worth adding an explicit reset (`display: block !important` or equivalent) to the scroll-area override rule so the intent is clear and future Mintlify updates don't silently break it.
Reviews (1): Last reviewed commit: "Fix sidebar padding + broken selectors u..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| /* Mobile nav - sidebar group list: adjust spacing */ | ||
| div#mobile-nav ul.sidebar-group, | ||
| div#mobile-nav ul#sidebar-group, | ||
| div#mobile-nav ul.sidebar-group, | ||
| #mobile-nav .sidebar-group-header + ul { |
There was a problem hiding this comment.
div#mobile-nav ul#sidebar-group to div#mobile-nav ul.sidebar-group created an exact duplicate of the line immediately above it. Both entries now target the same selector, so the second line provides no additional coverage. Since the PR description confirms .sidebar-group class is present in both old and new markup, a single class selector is sufficient — but the duplicate is dead weight that will cause confusion if the selector list ever needs to be extended.
| /* Mobile nav - sidebar group list: adjust spacing */ | |
| div#mobile-nav ul.sidebar-group, | |
| div#mobile-nav ul#sidebar-group, | |
| div#mobile-nav ul.sidebar-group, | |
| #mobile-nav .sidebar-group-header + ul { | |
| /* Mobile nav - sidebar group list: adjust spacing */ | |
| div#mobile-nav ul.sidebar-group, | |
| #mobile-nav .sidebar-group-header + ul { |
Prompt To Fix With AI
This is a comment left during a code review.
Path: mintlify/style.css
Line: 864-867
Comment:
The conversion of `div#mobile-nav ul#sidebar-group` to `div#mobile-nav ul.sidebar-group` created an exact duplicate of the line immediately above it. Both entries now target the same selector, so the second line provides no additional coverage. Since the PR description confirms `.sidebar-group` class is present in both old and new markup, a single class selector is sufficient — but the duplicate is dead weight that will cause confusion if the selector list ever needs to be extended.
```suggestion
/* Mobile nav - sidebar group list: adjust spacing */
div#mobile-nav ul.sidebar-group,
#mobile-nav .sidebar-group-header + ul {
```
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
… overlap - The first-group bottom padding rule used a direct-child selector (#navigation-items > .text-sm) that no longer matches the new scroll-area nesting; use a descendant selector that matches both markups. - The id-to-class swap dropped the group-icon padding rule below the generic '#navigation-items li[class*=space-y] > button' padding rule in specificity, so button text rendered under the absolutely-positioned ::before icons. Prefix the affected .sidebar-group rules with #navigation-items to restore id-level specificity. Co-authored-by: Cursor <cursoragent@cursor.com>
- Contact Verification: IconEmail2Check (Central Icons 1.1.296, round-outlined-radius-3-stroke-1.5, converted to the sidebar SVG convention) - Cards: existing credit-card1.svg - Stablecoins: existing coins.svg Co-authored-by: Cursor <cursoragent@cursor.com>
2 participants
Problem
Production docs show doubled sidebar padding (~52px inset) and group divider lines that no longer reach the sidebar edges.
Mintlify's hosted platform shipped a new sidebar renderer (base-ui scroll-area), while our pinned local CLI (4.2.284) still renders the old markup — so the bug only appears in prod. Same failure mode as #672 (footer collapse button).
What changed in prod markup:
#navigation-itemsis now a scroll-area wrapper; Mintlify'spx-7 py-6padding moved to an inner viewport div. Ourpadding: 24pxoverride stacked on top of it instead of replacing it.id="sidebar-group"was dropped from group<ul>s (thesidebar-groupclass remains), killing ~79 selector lines (API-reference group icons, chevrons, alignment).<h5 id="sidebar-title">to<h3 class="sidebar-title">.Fix
All in
mintlify/style.css, written to work with both old (local CLI) and new (prod) markup:#sidebar-groupid selectors to.sidebar-groupclass selectors (present in both markups; rules all use!importantso specificity is unaffected)h3.sidebar-titlein the group label rules and the relocated.text-smcontainerVerification
Out of scope
#mobile-navrules also appear to no longer match prod markup; will handle mobile nav in a follow-up.Made with Cursor
Also included
Added icons to the three API-reference sidebar groups that were missing them:
IconEmail2Check(new asset, extracted from Central Icons 1.1.296round-outlined-radius-3-stroke-1.5)credit-card1.svgcoins.svg