fix: mobile-responsive across pitch landing, streaming demo, and shared Nav#17
Merged
Conversation
Mobile review of the three live surfaces uncovered eight responsive issues. All fixed in this PR. CRITICAL - Streaming demo right rail was fixed 320px with no breakpoint, leaving the grid surface ~40px wide on phones. Now mobile-first: grid stacks above a capped (35vh) inspector with the transport bar below; original grid + right-rail layout returns at ≥768px. - @pretable/ui Nav had no media queries — 4-cell grid collided with the brand on narrow viewports. Search box and right-side chrome (GitHub stars, CTA) now hide below 640px / 768px; nav links allow horizontal scroll if they overflow. HIGH - PitchGrid filter row used `grid grid-flow-col auto-cols-fr` which squashed N inputs into N equal columns — unusable below ~768px. Now `flex flex-wrap` with `min-w-[140px] flex-1` per label, restoring the equal-column grid at md:. - StreamingProof always rendered three columns of metrics; captions wrapped 3+ lines on phones. Now `grid-cols-1 sm:grid-cols-3`. - Streaming demo transport bar packed 6 elements in a single flex row and overflowed below ~640px. Mobile lays the scrub bar on its own full-width row with controls wrapping above it. MEDIUM - Streaming demo used 100vh, which iOS Safari computes including the address bar that auto-hides on scroll → cut off content. Switched to 100dvh with 100vh fallback for legacy browsers. - All CTAs (Watch it stream, Try the live playground) and the streaming demo's play/speed controls were under the 44px iOS tap-target minimum. Bumped to min-height: 44px with py-[12px] / 8px padding. ReceiptsBand was already responsive (grid-cols-2 md:grid-cols-4) and needed no changes. Verified: - Workspace tests pass (24 playground, 19 streaming-demo, 380+ total) - Typecheck, lint, prettier, build all clean - Visual QA still required in real browsers — this PR addresses the static-code review findings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes eight responsive issues uncovered in a static code review of the three live surfaces (pitch landing, streaming demo, bench Nav). No surface had real mobile breakpoints before this PR.
Critical
High
Medium
ReceiptsBand was already responsive (`grid-cols-2 md:grid-cols-4`) — no change.
Test plan