[AAASM-4883] 🐛 (docs): Fix version-selector overflow at 375px

[Chisanan232]

Description

The python-sdk docs pre-release page had real horizontal overflow at a 375px mobile viewport: scrollWidth 400 > 375. This is a partial regression of AAASM-4319 — the sidebar-nav half of that fix held, but the version-selector half did not.

Root cause (measured live via Playwright DOM at 375px, not just source inspection):

• .md-version is a header flex item with white-space: nowrap, so the long mike current-version title pre-release (v0.0.1-rc.4) pushed the current label past the viewport.
• .md-version__list (the dropdown, always in the DOM) is absolutely positioned from a far-left anchor (~72px in), so the AAASM-4319 max-width: calc(100vw - 2rem) cap never bound (intrinsic width 335px < 343px cap) and, anchored at left 88px, it ran to right: 423px.

Fix (in docs/stylesheets/aaasm-brand.css, scoped to <=76.1875em, mkdocs-material's drawer breakpoint):

1. Cap + clip .md-version and truncate .md-version__current so the current label can't widen the header (and page) past the viewport.
2. Take the dropdown out of flow with viewport-gutter position: fixed (left/right: 0.8rem, top: 2.4rem just below the 48px mobile header) so it can never reach either edge and never contributes to page scrollWidth.

Desktop is unaffected — the entire change lives inside the mobile media query.

Type of Change

• 🔧 Bug fix

Breaking Changes

• No

Related Issues

• Related JIRA ticket: AAASM-4883
• Regression of: AAASM-4319

Testing

Verified with Playwright against the live deployed page https://docs.agent-assembly.com/python-sdk/pre-release/ (the authoritative environment — it carries the real mike version selector and real long version titles; a local mkdocs serve cannot render the mike selector, and the docs toolchain is not installed locally). The exact final stylesheet was injected against the real DOM and measured:

Viewport	Before	After
375px	scrollWidth 400 (overflow +25px); .md-version__list right 423	scrollWidth 367 (no overflow); dropdown left 32 / right 328, .md-version right 367
1280px	—	media query does not match; .md-version keeps max-width:none / position:absolute defaults; scrollWidth 1265 <= 1280

Before (375px) — dropdown (red outline) runs off the right edge:

After (375px) — dropdown contained within the viewport:

After (1280px) — desktop unchanged:

Screenshots are committed under validation/AAASM-4883/.

• Manual testing performed (Playwright at 375px and 1280px)
• No unit tests required (CSS-only docs theme change; not curl-verifiable — validated with a browser at 375px per the ticket)

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic (WHY comment documenting the regression + root cause)
• Documentation updated if needed

Closes AAASM-4883

[Chisanan232]

Review — Claude Code

CI: ✅ green (all checks SUCCESS + expected SKIPPED; no failures).
SonarCloud: 0 open issues
Scope vs AAASM-4883: ✅ complete — version-selector dropdown no longer overflows at 375px (CSS in aaasm-brand.css)
Side-effects: scoped to the mobile media query; desktop path unchanged
FE: Playwright-verified on the live site — 375px scrollWidth 400→367 (overflow gone), 1280px unaffected; before/after screenshots committed under validation/AAASM-4883/.
Verdict: ✅ ready to approve + merge.