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

fix: cinema mode works at every viewport size (no 800-960px dead zone)

Browse source 
Cinema rules previously lived only inside @media (min-width: 960px).
Between 800px and 960px the rules silently vanished and section.two-column
fell back to natural block flow — description, comments, download,
and Up Next stacked chaotically while the video floated elsewhere.
Split-screen viewports and tablet widths hit this gap.

Base cinema rules now sit outside any media query:
  narrow: single column — video > description > comments > purchase
  >= 960px: 2fr 1fr — video full-width top, description+comments
             left column, product-right (ring+download) right column

Video sizing (width:100% + max-height:92vh + object-fit:contain)
applies at all sizes.
This commit is contained in:
russell@unturf.com 2026-04-22 14:18:31 -04:00
parent 54d0c944d8
commit ace7bc0475
1 changed files with 55 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1713,6 +1713,56 @@ textarea.markup-editor-textarea {
}
}
/* Cinema mode base — applies at every viewport size. Desktop
(>=960px) enhances it to the 2-column layout. Narrow viewports
stack everything in a single column so cinema doesn't collapse
into natural block flow (which caused the "wasted whitespace"
state between 800px and 960px when nothing owned the layout). */
section.two-column.cinema-mode {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"images"
"description"
"comments"
"purchase";
gap: 16px;
max-width: 100%;
padding-left: 8px;
padding-right: 8px;
align-items: start;
}
section.two-column.cinema-mode .watch-left {
display: contents;
}
section.two-column.cinema-mode .product-images { grid-area: images; }
section.two-column.cinema-mode .product-description { grid-area: description; }
section.two-column.cinema-mode .product-comments { grid-area: comments; }
section.two-column.cinema-mode section.product-right { grid-area: purchase; }
section.two-column.cinema-mode .watch-video-container {
max-height: 92vh;
}
/* Cinema video/cover fills horizontal space. Intentional override
of the CLAUDE.md media-sizing rule — cinema wants edge-to-edge
even if viewport aspect ratio forces a little letterbox.
object-fit:contain keeps aspect ratio safe. */
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 {
width: 100%;
height: auto;
max-width: 100%;
max-height: 92vh;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
}
/*************************************************************
*
* for displays bigger than 800px which are "desktop-ish".
@ -1792,51 +1842,18 @@ textarea.markup-editor-textarea {
align-self: start;
}
/* Cinema mode: video spans viewport, Up Next + Download row under
video, side-by-side with comments. Unwraps .watch-left via
display:contents so its children become direct grid items. */
/* Desktop cinema enhancement — description + comments beside ring.
The base cinema rules live outside any media query so narrow
viewports also get a sensible single-column stack. */
section.two-column.cinema-mode {
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"images images"
"description purchase"
"comments purchase";
gap: 24px;
align-items: start;
}
section.two-column.cinema-mode .watch-left {
display: contents;
}
section.two-column.cinema-mode .product-images { grid-area: images; }
section.two-column.cinema-mode .product-description { grid-area: description; }
section.two-column.cinema-mode .product-comments { grid-area: comments; }
section.two-column.cinema-mode section.product-right { grid-area: purchase; }
/* 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 {
width: 100%;
height: auto;
max-width: 100%;
max-height: 92vh;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* if we have room, break markup-editor into 2 columns */