engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: cinema mode actually fills viewport width (override media-sizing rule)

Browse source 
Previous cinema CSS used width:auto which pinned small-resolution videos
to their natural size, leaving huge side-margins on wide displays.

Cinema explicitly wants edge-to-edge video: width:100%, height:auto,
max-height:92vh, object-fit:contain. This trades a small letterbox on
extra-wide viewports for real full-width rendering — intentional
override of the CLAUDE.md 'never combine width:100% with max-height'
rule, which exists to prevent dead whitespace on images. For cinema
the tradeoff is reversed: fox wants big video, accepts edge letterbox.
This commit is contained in:
russell@unturf.com 2026-04-21 18:12:35 -04:00
parent c5b0637d50
commit 2464d8722b
1 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
make_post_sell/static/css/common.css
View file

@ -1817,15 +1817,23 @@ textarea.markup-editor-textarea {
section.two-column.cinema-mode .product-comments { grid-area: comments; }
section.two-column.cinema-mode section.product-right { grid-area: purchase; }
/* Cinema: video/cover fills horizontal space, preserves aspect ratio.
Follows CLAUDE.md media rule: auto width + max-width + max-height. */
/* Cinema: video/cover actually fills horizontal space. Intentional
override of the CLAUDE.md media-sizing rule (width:auto + max-h) —
that rule prevents letterbox whitespace, but cinema explicitly
trades a little letterboxing on extra-wide viewports for real
edge-to-edge video. object-fit:contain keeps aspect ratio safe. */
section.two-column.cinema-mode .watch-video-container {
max-height: 92vh;
}
section.two-column.cinema-mode .product-main,
section.two-column.cinema-mode .watch-video-container > video,
section.two-column.cinema-mode .watch-audio-container > .product-main {
max-width: 100%;
max-height: 85vh;
width: auto;
width: 100%;
height: auto;
max-width: 100%;
max-height: 92vh;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;