Skip to content

Fix docs navbar overflowing tablets from 768 to 943px ​

Every docs page is 944px wide at any viewport from 768px to 943px, so it scrolls sideways on a tablet and a narrow desktop window. Measured 2026-11-05 on a local build of the docs site, loading /docs/design.html in an iframe at each width and comparing documentElement.scrollWidth to the width: 944 at 768, 800 and 900, then equal to the width at 959 and above (and at 700 and below, where VitePress shows the hamburger instead). At 768 the navbar's menu ends at 900px and the "…" button at 944px, both past the viewport. An independent reviewer of the Q63 fix reported the same 944px on all 35 docs pages.

The suspect is the same shape as Q63: from 768px VitePress swaps the hamburger for the full menu, and the brand plus "/ DOCS" in website/.vitepress/theme/CustomNavBarTitle.vue is nowrap and about 300px wide there, leaving the menu no room. Not confirmed: which element has to give. Find it with a render check, and probe 768 to 959 on every page type, not only the runbook.

Do not hide it with overflow-x: hidden on the page, which clips the "…" button instead of fixing the layout.