fix(www): align docs content with header logo below xl

[mehdibha]

What

Fixes docs content alignment between 768px and xl, where the misalignment was most visible on the wide (`full: true`) components and charts pages:

• The content column padded `px-4` (16px) while the header logo sits at `md:pl-6` (24px), leaving content 8px left of the logo from md up. Padding now tracks the header inset (`px-4 md:px-6`).
• Wide pages self-centered (`mx-auto`) once the viewport passed ~960px, drifting further right of the logo. They now hug the left edge below lg and keep `lg:px-8` until xl, so the body clears the sidebar and MiniTOC rails (was ~12px against the sidebar at lg, now 44px) instead of touching them.
• Narrow (`max-w-2xl`) pages keep centering at every width — left-hugging them stranded the column far from the MiniTOC with a large dead zone on the right.

Why

Between 768px and lg there is no sidebar, so the content's left edge should line up with the navbar logo; from lg the sidebar and TOC rails need breathing room that the full-width pages didn't leave.

Verification

Measured live in the browser: logo and h1 both at 24px on /docs/components and /docs/charts at 768/900/975/1010; 44px sidebar→body gap at 1024–1050 and 58px at 1280 on full pages; narrow pages centered (unchanged at lg+). `pnpm check` and `pnpm typecheck` pass.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
dotui	Ready	Preview	Sep 1, 2026 7:46pm UTC

[claude]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.