From 113ac9b130b19e7b5fdbe79cf90f52aae18862b3 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:50:17 -0700 Subject: [PATCH 1/4] docs(nav): pill header responds to its own width via container query 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. --- tailwind.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/tailwind.css b/tailwind.css index 86c722e..cda4bd7 100644 --- a/tailwind.css +++ b/tailwind.css @@ -158,9 +158,15 @@ /* the logo, the tab row, and the search/assistant cluster lay out on */ /* ONE flex line — no absolute positioning, so the variable-width */ /* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */ - /* Below 1440px the two-row layout above remains. */ + /* Below 1440px — including when the hosted assistant panel narrows */ + /* the page without changing the window width — the two-row layout */ + /* above remains: the pill activates on the header's own width via a */ + /* container query, not a viewport media query. */ /* ------------------------------------------------------------------ */ - @media (min-width: 1440px) { + #navbar { + container-type: inline-size; + } + @container (min-width: 1440px) { /* No full-width backdrop: the pill floats on the page background. */ #navbar #navbar-transition { display: none; @@ -170,10 +176,11 @@ display: flex; align-items: center; column-gap: 16px; - /* Side margins scale with the viewport (the design frame's 63/1728 - ratio) instead of stepping at a breakpoint, so the pill keeps the - same proportions as the window shrinks. */ - width: calc(100% - 7.3vw); + /* Side margins scale with the header's own width (the design + frame's 63/1728 ratio), so the pill keeps the same proportions + as the window — or the page area beside the assistant panel — + shrinks. */ + width: calc(100% - 7.3cqw); max-width: 1602px !important; height: 84px; margin: 24px auto 0; @@ -200,10 +207,14 @@ order: 1; flex: 0 0 auto !important; } + #navbar .nav-tabs-item { + white-space: nowrap; + } #navbar .max-w-8xl > div > div.px-12 { order: 2; position: static; width: max-content; + flex-shrink: 0; height: auto !important; padding: 0 !important; margin-left: auto; From 9f7624fbf8addbe8a9322003d1d64e57aec58c54 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:54:32 -0700 Subject: [PATCH 2/4] docs(nav): identical header chrome at every size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs.json | 13 ------------- tailwind.css | 17 +++++++++-------- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/docs.json b/docs.json index bc71589..c4001f9 100644 --- a/docs.json +++ b/docs.json @@ -428,19 +428,6 @@ "light": "/logo/world-developers.svg", "dark": "/logo/world-developers-white.svg" }, - "navbar": { - "links": [ - { - "label": "Explore Integrations", - "href": "https://world.org/ecosystem" - } - ], - "primary": { - "type": "button", - "label": "Developer Portal", - "href": "https://developer.worldcoin.org" - } - }, "footer": { "socials": { "x": "https://x.com/worldnetwork", diff --git a/tailwind.css b/tailwind.css index cda4bd7..0ddd737 100644 --- a/tailwind.css +++ b/tailwind.css @@ -259,18 +259,19 @@ border-color: rgba(255, 255, 255, 0.15) !important; color: #F3F2F0 !important; } - /* The design's header right side is just the Search / Ask pills: - no Explore Integrations link (Ecosystem lives in the Resources - menu and the footer), no Developer Portal CTA (moved into the - Resources menu at these widths), no theme toggle (the theme still - follows the system preference; both remain below 1440px). */ - #navbar li.navbar-link, - #navbar #topbar-cta-button, - #navbar #theme-preference-menu-trigger, + /* The emptied right-hand group collapses inside the pill. */ #navbar div.lg\:px-12 > div > div.justify-end { display: none !important; } } + /* The header chrome is identical at every size, per the design: no + Explore Integrations link and no Developer Portal CTA (both removed + from docs.json navbar — Ecosystem and Developer Portal live in the + Resources menu and footer), and no theme toggle (the theme follows + the system preference). */ + #navbar #theme-preference-menu-trigger { + display: none !important; + } /* Quickstart: tighten code block spacing within the card */ .quickstart-code .code-block { From c6b1378233ab7ae6456e3c8fa7ba6449962ce28b Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:58:40 -0700 Subject: [PATCH 3/4] =?UTF-8?q?docs(footer):=20single=20links=20row=20only?= =?UTF-8?q?=20=E2=80=94=20drop=20the=20theme's=20bottom=20utility=20row?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- tailwind.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tailwind.css b/tailwind.css index 0ddd737..fb7dfa4 100644 --- a/tailwind.css +++ b/tailwind.css @@ -608,6 +608,15 @@ #footer.advanced-footer div[class*="min-w-[140px]"] { display: none !important; } + /* The design's footer is the single links row only: drop the theme's + bottom utility row (Powered by Mintlify + theme icons) and its + divider. Branding removal is a paid-plan Mintlify feature — if the + org's plan requires attribution, revert this rule or use the + dashboard's hide-branding toggle instead. */ + #footer.advanced-footer > div > div.h-px, + #footer.advanced-footer > div > div:last-child { + display: none !important; + } @media (max-width: 900px) { .landing-footer-inner { padding: 0 24px 48px; From df26c5d0555d5a0e9e42d5c8a63dcceb7ece6711 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 15:04:03 -0700 Subject: [PATCH 4/4] docs(home): keep the trademark line inline with the footer links on small screens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- tailwind.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/tailwind.css b/tailwind.css index fb7dfa4..0892846 100644 --- a/tailwind.css +++ b/tailwind.css @@ -626,7 +626,9 @@ padding: 64px 24px; } .landing-footer-links { - gap: 80px !important; + /* Wrapped rows stay together: the trademark line sits inline with + the links instead of floating far above them. */ + gap: 16px 40px !important; } } @media (max-width: 600px) { @@ -647,7 +649,7 @@ font-size: 18px !important; } .landing-footer-links { - gap: 60px !important; + gap: 12px 32px !important; } }