Distinguish docs sidebar section headings from page links#426
Conversation
Section headings (Overview, Working with your browser, etc.) rendered at the same size/weight as the clickable page links beneath them, so the hierarchy didn't read. Restyle them into a quiet muted "eyebrow" with a divider between sections. The prior rule targeted #sidebar-title, an id Mintlify no longer emits (the title is now .sidebar-group-header with an inner h3.sidebar-title), so it was a no-op. Active page and item styling are unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Risk assessment: Low risk.
I reviewed the actual diff for this PR. It modifies only style.css, with a small CSS-only change scoped to Mintlify sidebar section headings and section spacing. The blast radius is limited to the docs site's sidebar presentation; it doesn't modify application logic, authentication, permissions, infrastructure, data handling, prompts, or build/deploy configuration.
I found no CODEOWNERS file in the repository, and there were no existing approvals on the PR, so I'm approving based on the Low-risk assessment.
Sent by Cursor Automation: Assign PR reviewers
1 participant
Summary
Sidebar section headings (Overview, Working with your browser, Integrations, etc.) rendered at the same size and weight as the clickable page links beneath them, so the hierarchy didn't read — a heading looked just like a link.
This restyles the section headings into a quiet, muted eyebrow (smaller, lighter, letter-spaced) with a hairline divider between sections, so headings read as structure and the page links stand out as destinations.
Why the old rule was a no-op
The previous rule targeted
#sidebar-title, an id Mintlify no longer emits. The group title is now.sidebar-group-headercontaining an innerh3.sidebar-titlethat inherits font/size/color. So the existing "bold 15px" rule matched nothing — which is why headings looked like links. The new rule targets.sidebar-group-headerdirectly.grey-light-11for muted text,grey-dark-12/charcoalfor dividers).Scope
Sidebar hierarchy only. Making the expandable toggles (Basics, Intermediate, Computer Use, etc.) clickable with card-based landing pages is a separate follow-up.
Test plan
.sidebar-group-headeris the correct target against the live rendered DOM (the old#sidebar-titleid is gone).mintlify devbuild: section headings recede to muted eyebrows with dividers; page links and the active/bold state are unchanged.style.css).Note
Low Risk
CSS-only navigation presentation in
style.css; no auth, data, or application logic changes.Overview
Replaces a no-op sidebar rule that targeted Mintlify’s removed
#sidebar-titleid with styles on.sidebar-group-header, so section labels (Overview, Integrations, etc.) read as structure instead of looking like page links.Section headings are restyled as muted eyebrows (11px, normal weight, letter-spacing, grey text) with dark-mode color overrides matching existing
style.csspatterns. Non-first sections get extra spacing and a hairline top border viadiv[class*="mt-"] > .sidebar-group-header. Active page link styling is untouched.Reviewed by Cursor Bugbot for commit 686f5ae. Bugbot is set up for automated code reviews on this repo. Configure here.