Docs: visible sidebar-collapse button in the footer + tooltips on the toggles

[patcapulong]

Summary

The sidebar collapse affordance was hard to discover — the edge rail only reveals on hover. This adds a visible collapse button in the sidebar footer, plus tooltips on both toggles:

• Footer collapse button — sits right of the theme switcher wearing its exact chrome (same hairline border + hover step, same icon color/weight, 28px tall, squircled circle). Clicking runs the same animated collapse as the rail (shared animatedToggle()); reopening stays the rail's job since the footer hides when collapsed.
• Visible from first paint — Mintlify runs custom JS a few hundred ms after the SSR HTML paints, so an injected button would pop in late next to the already-painted switcher. Instead the pixels are pseudo-elements of the server-rendered switcher (visible in the first frame, pointer-events: none so a pre-mount click can't flip the theme), and the injected button is just the invisible hit target mounted over them. Hover rides :has() back onto the pseudos, so the pixels have exactly one owner.
• Tooltips — inverted mono bubbles (near-black in light mode, flipped in dark) in the playground's tag vocabulary. Hover-intent delay in, soft fade out; the footer one rises up centered above the button, the rail ones slide out of the icon to the right with copy that flips Collapse ⇄ Expand. On toggle the bubble hides instantly and stays muted until a genuine re-entry, so the copy never swaps mid-air under a resting cursor.
• Squircle fix — the global * { corner-shape: squircle } matches elements only; it now covers ::before/::after too, so CSS-drawn chrome (this button, the tooltips, the (0, 0, 0) tag) corner-smooths like everything around it.

Test plan

• Footer button renders next to the theme switcher from first paint (no pop-in, no layout shift), light + dark
• Click collapses with the normal animation; rail reopens; state persists across reload
• Tooltips: footer rises centered above ("Collapse"); rail slides right ("Collapse" expanded / "Expand" collapsed); no text swap when clicking with cursor resting on the rail
• Survives SPA navigation without duplicating; absent on mobile (hamburger nav) and custom-layout pages
• (0, 0, 0) footer tag unaffected; theme switcher unaffected

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
grid-flow-builder	Ignored		Jul 7, 2026 9:45pm
grid-wallet-demo	Ignored		Jul 7, 2026 9:45pm

[greptile-apps]

Greptile Summary

This PR makes the Mintlify sidebar collapse control easier to find. The main changes are:

• A shared animated toggle for the rail and footer controls.
• An injected footer collapse hit target next to the theme switcher.
• First-paint pseudo-element chrome for the footer button.
• Tooltips for the footer and rail toggles.
• Squircle styling extended to pseudo-elements.

Confidence Score: 4/5

The footer collapse button layout needs a small fix before merging.

• The JS lifecycle for the rail and footer button looks consistent.
• The CSS-drawn footer button can use the wrong containing block.
• That can separate the visible button from the click target on first paint.

mintlify/style.css

Important Files Changed

Filename	Overview
mintlify/sidebar-toggle.js	Adds the shared animated toggle path and lifecycle management for the footer collapse button.
mintlify/style.css	Adds the CSS-drawn footer collapse button, hover states, tooltips, and pseudo-element squircle coverage.

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
mintlify/style.css:4486-4488
**Pseudo Button Anchors Wrong**

The new collapse-button pixels are absolute `::before` and `::after` children of the theme switcher, but this rule does not make the switcher their containing block. On the first paint, `left: calc(100% + 8px)` can resolve against the footer row instead of the switcher, placing the visible circle away from the invisible `.ls-nav-collapse-btn` hit target or clipping it at the sidebar edge.

```suggestion
#sidebar-content > div > button[aria-label="Toggle dark mode"] {
  position: relative;
  margin-right: 36px;
}
```

_{Reviews (1): Last reviewed commit: "Docs: fix stale comment — the footer col..." | Re-trigger Greptile}

[greptile-apps]

Pseudo Button Anchors Wrong

The new collapse-button pixels are absolute ::before and ::after children of the theme switcher, but this rule does not make the switcher their containing block. On the first paint, left: calc(100% + 8px) can resolve against the footer row instead of the switcher, placing the visible circle away from the invisible .ls-nav-collapse-btn hit target or clipping it at the sidebar edge.

Suggested change

	#sidebar-content > div > button[aria-label="Toggle dark mode"] {
	margin-right: 36px;
	}
	#sidebar-content > div > button[aria-label="Toggle dark mode"] {
	position: relative;
	margin-right: 36px;
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: mintlify/style.css
Line: 4486-4488

Comment:
**Pseudo Button Anchors Wrong**

The new collapse-button pixels are absolute `::before` and `::after` children of the theme switcher, but this rule does not make the switcher their containing block. On the first paint, `left: calc(100% + 8px)` can resolve against the footer row instead of the switcher, placing the visible circle away from the invisible `.ls-nav-collapse-btn` hit target or clipping it at the sidebar edge.

```suggestion
#sidebar-content > div > button[aria-label="Toggle dark mode"] {
  position: relative;
  margin-right: 36px;
}
```

How can I resolve this? If you propose a fix, please make it concise.

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
Grid	🟢 Ready	View Preview	Jul 7, 2026, 9:56 PM