Docs: fix the footer collapse button on production (new Mintlify theme-switcher markup)

[patcapulong]

Summary

The footer sidebar-collapse button (#665) never rendered on production: Mintlify's evergreen hosted renderer has replaced the single button[aria-label="Toggle dark mode"] with a three-option [role="group"][aria-label="Theme preference"] pill, while the pinned local CLI (4.2.284) still renders the old markup the feature was built and tested against. Every CSS anchor and the JS insertion point matched nothing on prod, so the button silently vanished (the rail was unaffected).

• All selectors + the injection anchor now target both markup generations
• The switcher's positioning context is now declared by our rules rather than inherited from Mintlify's relative utility class (Greptile's earlier point, now load-bearing)

Verified locally against the old markup (unchanged) and against prod's exact group markup transplanted into the live DOM (pixels anchor, hit target re-injects, click collapses).

Test plan

• Mintlify preview deployment of this PR (hosted pipeline = prod markup): button renders next to the three-way theme switcher, click collapses, tooltip works
• Local dev (old CLI markup): unchanged
• Light + dark

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	Preview	Jul 9, 2026 12:14am
grid-wallet-demo	Ignored	Preview	Jul 9, 2026 12:14am

[greptile-apps]

Greptile Summary

This PR fixes the sidebar footer collapse button that silently disappeared on production because Mintlify's hosted (evergreen) renderer replaced the single button[aria-label="Toggle dark mode"] with a [role="group"][aria-label="Theme preference"] pill, while the pinned local CLI (v4.2.284) still renders the old markup. Every CSS anchor and the JS querySelector matched nothing on prod, so the button was never inserted.

• All CSS selectors and the JS querySelector injection anchor now target both markup generations (old single-button and new three-option group pill) to keep both environments working.
• position: relative is now explicitly declared by the CSS rules rather than inherited from Mintlify's utility class, making the pseudo-element anchoring resilient to classname changes across renderer versions.

Confidence Score: 5/5

Safe to merge — the changes are narrowly scoped to CSS selectors and a single JS querySelector, with no logic changes to toggle behavior, persistence, or SPA re-sync.

Both files make purely additive changes: every existing selector gains a comma-paired variant for the new Mintlify markup, and position: relative is promoted from an inherited Mintlify class to an explicit rule. The toggle logic, drag-to-resize, localStorage persistence, and MutationObserver are all untouched. The fix covers all dark-mode, hover, and dark-hover variants of the pseudo-elements.

No files require special attention.

Important Files Changed

Filename	Overview
mintlify/sidebar-toggle.js	querySelector updated with comma-separated selector covering both the old button[aria-label="Toggle dark mode"] and new [role="group"][aria-label="Theme preference"]; insertion logic (insertBefore(footerBtn, theme.nextSibling)) is unchanged and works for both element types.
mintlify/style.css	All seven CSS rule blocks (slot reservation, ::after, ::before, dark ::after, hover ::after, hover ::before, dark hover variants, and the :has() container) have the new [role="group"] selector added as a parallel comma rule. position: relative is now owned by the slot-reservation rule, removing reliance on Mintlify's utility class.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ensureFooterBtn called] --> B{isDesktop AND hasVisibleSidebar?}
    B -- No --> C[removeFooterBtn]
    B -- Yes --> D{footerBtn already in DOM?}
    D -- Yes --> E[return early]
    D -- No --> F["querySelector both generations\n#sidebar-content button or role=group"]
    F --> G{theme element found?}
    G -- No --> H[return — retry on next mutation]
    G -- Yes --> I[createElement button.ls-nav-collapse-btn]
    I --> J["insertBefore(footerBtn, theme.nextSibling)"]
    J --> K[Footer button rendered next to theme switcher]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[ensureFooterBtn called] --> B{isDesktop AND hasVisibleSidebar?}
    B -- No --> C[removeFooterBtn]
    B -- Yes --> D{footerBtn already in DOM?}
    D -- Yes --> E[return early]
    D -- No --> F["querySelector both generations\n#sidebar-content button or role=group"]
    F --> G{theme element found?}
    G -- No --> H[return — retry on next mutation]
    G -- Yes --> I[createElement button.ls-nav-collapse-btn]
    I --> J["insertBefore(footerBtn, theme.nextSibling)"]
    J --> K[Footer button rendered next to theme switcher]

Loading

_{Reviews (1): Last reviewed commit: "Docs: anchor the footer collapse button ..." | Re-trigger Greptile}