moonming opened a new pull request, #2088: URL: https://github.com/apache/apisix-website/pull/2088
## What On every desktop width, the header brand wrapped onto two lines and the wordmark overlapped the **Docs** nav item — most visibly on docs pages, e.g. https://apisix.apache.org/docs/apisix/getting-started/README/: - the `site-header` row is capped at the 1140px page column (1100px usable), while the desktop nav has outgrown it: brand 175px + gap 16px + nav ~870px + DocSearch button 155px ≈ **1215px** on docs pages; - every nav link is `white-space: nowrap`, so flexbox squeezed the only shrinkable item — the brand link. `Apache APISIX®` broke onto two lines and its overflow sat under the Docs entry. Non-search pages (~1055px) fit by luck; adding one more nav item would have broken them too. ## Fix All in `next/src/styles/global.css`: 1. **The brand never shrinks or wraps** (`flex-shrink: 0; white-space: nowrap`) — the invariant whose absence caused the bug. 2. **The header row spans the full viewport again**, like the pre-Astro Docusaurus navbar, instead of the 1140px column. 3. **997–1365px**: nav links tighten (`gap .125rem`, `padding-inline .5rem`) and the DocSearch button collapses to its icon (the button keeps its `aria-label`; the overrides out-specify DocSearch's own `.DocSearch-Button-Keys { display: flex }`). 4. **997–1139px**: the brand wordmark hides, leaving the 36px logo mark. 5. **≤996px**: the burger collapse is untouched and the wordmark stays visible on mobile. ## Verification Measured against the live docs-page markup (real DocSearch button, production fonts) by injecting exactly this CSS and resizing: | viewport (CSS px) | tier | brand | nav overflow | slack | |---|---|---|---|---| | 1440 | full | one line | 0 | 172px | | 1366 (tier edge) | full | one line | 0 | 113px | | 1280 | icon search | one line | 0 | 199px | | 1140 (tier edge) | icon search | one line | 0 | 59px | | 1139 (tier edge) | logo mark | one line | 0 | 198px | | 997 (tier edge) | logo mark | one line | 0 | 56px | | 996 / 375 | burger | wordmark visible | — | — | zh locale is wider-margined than en (CJK labels are shorter; slack 355px at 1185px). Local checks in `next/`: `astro build` passes; the Playwright e2e suite shows no new failures (the 3 failures on Plugin Hub / Downloads / zh-routes reproduce identically on a clean checkout without the content sync, both projects). -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
