fix(website): prevent playground page from overflowing the viewport

[timotheeguerin]

Problem

The /playground page overflows the viewport slightly, adding a vertical scrollbar.

The container hard-coded its height as calc(100vh - var(--header-height)). --header-height is 50px, but the header actually renders at 54px. Since #11292 changed the header from position: fixed (out of flow, overlaid) to position: sticky (in flow) and switched the navbar to min-height and the body to min-height: 100vh, that 4px difference now stacks: 54px + (100vh - 50px) = 100vh + 4px → a small vertical scroll.

This is not related to header wrapping — the overflow is a constant 4px at every width.

Fix

Stop hard-coding the header offset. Make .main a flex column in the base layout and let the playground fill the remaining space with flex: 1, so it always tracks the real rendered header height.

Verification (Chromium / Playwright)

• Playground: container height = 846px (= 900 - 54), 0 vertical overflow at 1440px and 800px viewports (previously 4px).
• Regression check on /community, /videos, /blog, /can-i-use/http, and /: rendered page height is identical with .main as a flex column vs. block (diff = 0), so the layout change is neutral for existing pages.

@typespec/website is a private package (not published), so no changelog entry is required.

[github-actions]

No changes needing a change description found.

[azure-sdk-automation]

You can try these changes here

🛝 Playground	🌐 Website	🛝 VSCode Extension