Stacked phone layout: player, title, chat and controls in one column - #29
Open
sbddesign wants to merge 1 commit into
Open
Stacked phone layout: player, title, chat and controls in one column#29sbddesign wants to merge 1 commit into
sbddesign wants to merge 1 commit into
Conversation
…column On a portrait phone the full-bleed player letterboxed a 16:9 clip into a ~210px band with ~70% of the screen black, and the header buttons overflowed the right edge by 15px at 375px wide (CHAT and SOUND were cut off). The chat overlay also hid the video entirely while open. Below md the page is now a flex column: header, aspect-video player, lower third, live chat (inline, always visible when enabled) or an "Up next" list when chat is off, and the bottom bar. The wrapper around the player column is `display: contents` on phones so those pieces are laid out directly by <main>; from md up it turns back into the positioned column and every piece becomes the same TV-style overlay as before. Desktop layout is unchanged. Also on phones: viewer count moves from the header chip into the lower third, the sound button becomes a short 🔊/🔇 toggle, inputs use 16px so iOS Safari stops zooming the page on focus, and the bottom bar pads past the home indicator (viewport-fit=cover + safe-area-inset-bottom). Everywhere: the TAP FOR SOUND hint is centered on the player instead of sitting on top of the title when it wraps to two lines. The /c/<id> replay page gets the same stacked treatment.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Why
Stephen: "doesn't work great on mobile". Checked the live site at 375×812:
What
Below
mdthe page is a flex column: header →aspect-videoplayer → lower third → live chat inline (or "Up next" list when chat is off) → bottom bar. The wrapper around the player column isdisplay: contentson phones so those pieces are laid out directly by<main>; frommdup it becomes the positioned column again and everything is the same TV-style overlay as before. Desktop is unchanged.Phone-only tweaks: viewer count moves into the lower third, sound button is a short 🔊/🔇 toggle, inputs are 16px (
md:text-sm), bottom bar pads past the home indicator (viewportexport withviewportFit: "cover"+safe-area-inset-bottom).Everywhere: TAP FOR SOUND is centered on the player instead of overlapping the title.
/c/<id>replay page gets the same stacked layout.ChatPanelloses itsopen/onCloseoverlay props and the mobile CHAT button; it is always inline now.Verified
tsc --noEmitclean,next buildgreen.Not tested on a physical iPhone — safe-area padding and the no-zoom behavior are the two things worth a real-device tap.