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

fix: cinema 2-col at 800px, comment section breathing room, button gap

Browse source 
Three polish tweaks for cinema mode in narrow desktop panels:

1. 2-column layout kicks in at >=800px instead of >=960px. Cinema's
   video already fills the full width, so the content | purchase
   split below it doesn't need a typical desktop-wide viewport —
   it works fine on smaller panels. This removes the 800-960px dead
   zone where cinema-wide was still single-column stacking.

2. Comments get 24px margin-top + 20px padding-top + a top border so
   they read as their own section instead of running continuous into
   the description above and the sidebar controls below.

3. Stacked sidebar buttons (hamburger, Edit, Download) now have an
   8px margin-bottom between each so they don't look shoulder-to-
   shoulder. Inherits evenly from the task-bar grid gap.
This commit is contained in:
russell@unturf.com 2026-04-22 17:41:41 -04:00
parent 3c6c579b73
commit f57abd5193
1 changed files with 28 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1816,13 +1816,40 @@ section.two-column.cinema-mode.cinema-wide section.product-right button.mps-butt
box-sizing: border-box;
padding: 14px 16px;
margin-top: 0;
margin-bottom: 0;
margin-bottom: 8px;
font-size: var(--text-sm, 14px);
line-height: 1.3;
white-space: normal;
text-align: center;
}
/* Separate the comment section from the description block above and
the sidebar controls below so it reads as its own area, not just
more lines of text glued to the toolbar. */
section.two-column.cinema-mode.cinema-wide .product-comments {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-color, #ccc);
}
/* Cinema enhancement: split content | purchase into 2 columns as soon
as the viewport has room for it (>=800px). The base cinema rules
handle the single-column stack for narrower panels. Moved below the
usual 960px desktop threshold because cinema's full-width video +
stacked columns don't need as much horizontal room as a normal
product page with side-by-side hero + sidebar. */
@media (min-width: 800px) {
section.two-column.cinema-mode.cinema-wide {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"images images"
"content purchase";
gap: 24px;
padding-left: 20px;
padding-right: 20px;
}
}
/*************************************************************
*
* for displays bigger than 800px which are "desktop-ish".
@ -1902,22 +1929,6 @@ section.two-column.cinema-mode.cinema-wide section.product-right button.mps-butt
align-self: start;
}
/* 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. content area
contains description + comments as an internal stack, so row 2
is sized by whichever column is taller and no spanning tricks
stretch description's row when the Up Next list is long. */
section.two-column.cinema-mode.cinema-wide {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"images images"
"content purchase";
gap: 24px;
padding-left: 20px;
padding-right: 20px;
}
/* if we have room, break markup-editor into 2 columns */
div.markup-editor {
display: grid;