docs(nav): header responds to its own width; identical chrome at every size - #179
Merged
Merged
Conversation
The hosted assistant panel narrows the page without changing the window width, so the pill header's viewport media query stayed active in a ~1340px slot and the tab labels wrapped inside their pills. Make #navbar an inline-size container and gate the pill on a container query instead: when anything narrows the header below 1440px, the two-row layout returns. Margins scale with the header's own width (cqw), and the tab row is nowrap/no-shrink inside the pill as belt and braces.
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
Explore Integrations, the Developer Portal CTA, and the theme toggle were hidden only inside the pill layout, so they reappeared in the two-row fallback (smaller windows, or with the assistant panel open). Remove the navbar links/CTA from docs.json instead (Developer Portal and Ecosystem live in the Resources menu and footer) and hide the theme toggle globally — one header everywhere; the theme follows the system preference.
soamdesai-tfh
changed the title
… row The design's footer ends at the '™ 2026 World' + links row; Mintlify's divider, 'Powered by Mintlify', and the footer theme icons below it are hidden. Branding removal is a paid-plan Mintlify feature; revert or use the dashboard hide-branding toggle if the plan requires attribution.
Takaros999
previously approved these changes
Sep 10, 2026
…mall screens The landing footer row used 80px/60px wrap gaps below 900px/600px, so '™ 2026 World' floated far above the links once the row wrapped. Tighten the wrap gaps (16/40 and 12/32) so the row reads as one block at every width.
Takaros999
approved these changes
Sep 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two follow-up fixes to the merged #172 pill header, both from QA on the deployed preview:
1. Tab labels wrapped when the Ask Assistant panel opened
The panel narrows the page ~390px without changing the window width, so the pill's viewport media query stayed active in a ~1340px slot and the tab labels wrapped inside their pills.
Fix:
#navbarbecomes an inline-size container and the pill activates on a container query — the header responds to its own width. Panel open (or any narrowing below 1440px) → the two-row fallback returns cleanly. Margins scale incqw(the design's 63/1728 ratio of the header's own width); the tab row isnowrap/no-shrink as belt and braces; browsers without container-query support degrade to the two-row header.Verified by simulation: window 1728px, header constrained to 1338px → pill deactivates, no wrapping.
2. Explore Integrations / Developer Portal / theme toggle reappeared below the pill breakpoint
They were hidden only inside the pill rules, so the two-row fallback (smaller windows, assistant panel open) showed them again — an inconsistent header.
Fix: remove the
navbarlinks/CTA from docs.json entirely (Developer Portal and Ecosystem live in the Resources menu and the footer) and hide the theme toggle globally. One identical header at every size: logo · tabs · Search · Ask Assistant. Dark mode still follows the system preference.Verified at 1300px (fallback) and 1728px (pill): no Explore/Portal/toggle at either; pill geometry unchanged.
Recommend merging promptly — main currently ships the pill header with the panel-wrap bug.