fix(site): stop mobile text being trimmed off-screen

[mibrahimdev]

Bug

On mobile widths (360–414px), the marketing + docs site trimmed/cut off text on the right edge instead of wrapping. Examples:

• Landing hero rendered "The eye that sees" as "The eye that see" and "your app says" as "your a…".
• Protocol-card body text was clipped on the right.
• The docs API tables (getting-started, ai-exports) had their second column pushed off-screen, and long inline <code> paths/identifiers overflowed.

Root cause

The site sets body { overflow-x: hidden } (style.css:56), which converts any horizontal overflow into a silent trim rather than a scrollbar. Two things were overflowing on mobile:

1. Grid-track inflation (landing). The mobile single-column grids use grid-template-columns: 1fr = minmax(auto, 1fr). The auto minimum grows to the largest child's min-content. The .capture panel and .proto-snippet use white-space: nowrap, giving them a ~407px min-content — which inflated the track and stretched the adjacent hero / card text columns past the viewport, where .hero { overflow: hidden } clipped them.
2. Unbreakable tokens (docs). table.api td:first-child { white-space: nowrap } plus long inline <code> tokens (SharinganExport.sessionJson(events), sharingan/build/XCFrameworks/release/Sharingan.xcframework, ./gradlew :shared:embedAndSignAppleFrameworkForXcode) have no break opportunities, so they forced cells/paragraphs wider than the screen.

Fix

Minimal CSS, entirely inside the existing mobile breakpoints (@media (max-width: 880px) / 860px) — desktop CSS is untouched:

landing.css

• .hero-grid → minmax(0, 1fr) and .capture { min-width: 0 } so the panel shrinks below its nowrap min-content (rows still ellipsize — intended terminal look).
• .proto-card { min-width: 0 } so cards shrink and the code snippet scrolls inside (it already has overflow-x: auto).
• overflow-wrap: anywhere on inline code in the quickstart / agent / noop sections.

docs.css

• table.api td:first-child { white-space: normal } so function names wrap.
• overflow-wrap: anywhere on inline <code> in paragraphs, list items, table cells and callouts.

Verification

Reproduced and fixed with Playwright at 360 / 390 / 414px on all four pages.

	Before	After
Landing (360px)	scrollWidth=433 > viewport; hero text clipped ("see")	scrollWidth=360; all text wraps/fits
getting-started	scrollWidth=558; table + code clipped	scrollWidth=360; clean
ai-exports	scrollWidth=460; PRODUCES column clipped	scrollWidth=360; clean
integrations	ok	ok

Zero remaining overflow drivers at all three widths. Desktop (1280px) confirmed visually identical (scrollWidth == innerWidth), as expected since all changes are media-query-scoped.

🤖 Generated with Claude Code