docs: restructure navigation around Bruno's products, and go full width

[anthonyd-bruno]

Why

Feedback was that the docs are hard to navigate — it isn't easy to find what you need from the sidebar, and it isn't easy to tell what the different parts of Bruno actually are.

The v4 sidebar was a single flat list of six generic buckets (Getting Started, Core Features, API Tools, Developer Tools, License Management, Advanced Guides) that mixed the products together. The CLI, the VS Code extension and the API documentation all lived under "Developer Tools" alongside Bru Lang and the converters.

What changed

1. Navigation restructured around Bruno's products (docs.json)

Those buckets are replaced with Mintlify tabs, one per product:

Get Started | API Client | CLI | API Docs | VS Code Extension | Reference | Licensing

The four product tabs are the spine. The other three exist because the content has to live somewhere: Get Started is the cross-product onboarding path, Reference holds the genuinely shared material (Bru Lang, OpenCollection YAML, converters), and Licensing is orthogonal to all four. They're ordered so the four products read as a contiguous block.

Beyond the regrouping:

• CLI is promoted from a subgroup to a tab and resplit into Overview / Run Collections / Configuration / CI/CD (it was a 10-item flat list).
• "Git Providers" folds into "Git & Collaboration" — it was a two-page group sitting beside the real Git docs.
• advanced-guides/visualize is "Response Visualization", so it moves under Response Data & Cookies. That retires the one-page "Advanced Guides" group.
• get-started/configure/* becomes "Settings" under API Client.

One new page, api-client/overview.mdx, gives the API Client tab a landing page. It cross-links the other three products so each part of Bruno is discoverable from the others.

No files were moved and no page paths changed, so every existing URL still resolves and no redirects are needed.

2. Nav tabs span the full header width (style.css, new file)

The tab row is a shrink-to-fit flex container, so seven tabs bunched against the left gutter — at 1440px it measured 796px inside 1344px of available space. Letting it grow and distributing the slack with justify-content: space-between divides the leftover width into six identical gaps.

3. The docs shell is full width (style.css)

Mintlify centres the whole shell inside a max-w-8xl (1472px) box, leaving 224px of dead margin per side at 1920px and 544px at 2560px. Two elements carry that cap — the navbar rail and the wrapper around the sidebar/content/TOC — and both are released.

docs.json has no content-width option (styling accepts only eyebrows and codeblocks), and the native escape hatches are per-page frontmatter mode: "custom" / "wide", which drop chrome we want and would need pasting into every .mdx. So CSS is the only route.

Mintlify auto-loads a root style.css — the same mechanism that already loads reo.js and webinar-card.js.

Verification

Measured with Puppeteer against mint dev, both themes, across /introduction/getting-started, /bru-cli/overview, /license-overview, /send-requests/REST/rest-api and /bru-cli/commandOptions.

Nothing lost in the restructure. All 196 pages currently in the v4 nav are still there, each exactly once, every one resolving to a file. v2 and v3 navigation are byte-identical — they're legacy version snapshots and are deliberately untouched.

Tab spacing — gap spread is exactly 0.00px at every width, i.e. all six gaps identical:

viewport	each gap	bar span
1024	45.93px	48 → 976	flush both edges
1440	115.26px	48 → 1392	flush both edges
1920	120.59px*	272 → 1648	flush both edges

_{* before the full-width change; 195.3px after, since the rail is no longer capped.}

Full width — a measured no-op up to 1472px, so most laptops see no change at all:

viewport	content column	sidebar x	TOC right edge
1440	688.8px	32	1408 (no-op)
1472	720.8px	32	1440 (no-op)
1473	721.8px	32	1441 (first change)
1920	1168.8px	32	1888
2560	1808.8px	32	2528

• No horizontal overflow at any width (scrollWidth === clientWidth throughout).
• Mobile untouched — the tab bar is display:none below 1024px, and content measures 460px/760px at 500px/800px viewports, unchanged.
• The underline indicator is unchanged from baseline (100.16px Get Started, 46.01px CLI, 88.32px Licensing).
• mint validate passes. mint broken-links reports the same 99 pre-existing broken links as main — none new.

Known costs on very wide screens

Both are documented inline in style.css and both are dials that can be turned:

• Prose measure grows from 78 characters to 124 at 1920px and 198 at 2560px. Capping the content column instead was built and measured — it strands the TOC across a void of up to 1461px at 3440px, and capping prose alone gives the page two different right margins. Leaving the shell uncapped is the only variant where every element keeps a single shared right edge.
• Card grids top out at 2 columns (a Mintlify container query), so cards inflate rather than reflow past ~2560px.

Notes for review

• Rebased onto main after Server Side Events  #156 landed; send-requests/REST/sse is carried into the new REST group in its original position. Verified zero pages dropped relative to main.
• docs.json doesn't satisfy npm run lint, but it didn't on main either — I preserved the existing formatting rather than bury the restructure in a whole-file reformat. style.css and api-client/overview.mdx are both prettier-clean.
• The 99 pre-existing broken links (mostly doubled /images/images/... paths and stale /import-export-data/... links in variables/*) are untouched here and worth a separate cleanup.

🤖 Generated with Claude Code

[anthonyd-bruno]

[anthonyd-bruno]

Closing in favor of #163 — same branch (542721c), pushed to this repo instead of my fork so Mintlify can generate a preview deployment. The Mintlify GitHub app can't build against fork PRs, which is why no preview or checks ever appeared here. Screenshots above still apply.