diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 3b20f5f..5437558 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -1713,6 +1713,15 @@ textarea.markup-editor-textarea { } } +/* cinema-content-stack is a template wrapper around description + + comments. Default display:contents makes it transparent so every + layout outside cinema mode sees children as direct grid items. + Cinema mode turns it into a single grid cell (rules below) so the + purchase column can't stretch description's row. */ +.cinema-content-stack { + display: contents; +} + /* 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 @@ -1723,8 +1732,7 @@ section.two-column.cinema-mode { grid-template-columns: 1fr; grid-template-areas: "images" - "description" - "comments" + "content" "purchase"; gap: 16px; max-width: 100%; @@ -1737,10 +1745,17 @@ section.two-column.cinema-mode .watch-left { display: contents; } +section.two-column.cinema-mode .cinema-content-stack { + display: grid; + grid-area: content; + grid-template-rows: auto auto; + gap: 16px; + align-content: start; + min-width: 0; +} + 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 section.product-right { grid-area: purchase; align-self: start; } section.two-column.cinema-mode .watch-video-container { max-height: 92vh; @@ -1844,13 +1859,15 @@ section.two-column.cinema-mode .watch-audio-container > .product-main { /* 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. */ + 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 { grid-template-columns: 2fr 1fr; grid-template-areas: - "images images" - "description purchase" - "comments purchase"; + "images images" + "content purchase"; gap: 24px; padding-left: 20px; padding-right: 20px; diff --git a/make_post_sell/templates/content.j2 b/make_post_sell/templates/content.j2 index e6aee94..5e3821d 100644 --- a/make_post_sell/templates/content.j2 +++ b/make_post_sell/templates/content.j2 @@ -117,6 +117,7 @@

{{ product.title }}
uploaded to {{ product.shop.name }}

+

@@ -158,6 +159,7 @@ {% include 'snippets/comments.j2' %}
+
{% if request.shop.watch_mode_enabled %}{% endif %} diff --git a/make_post_sell/templates/product.j2 b/make_post_sell/templates/product.j2 index 472d0a9..7d9dff1 100644 --- a/make_post_sell/templates/product.j2 +++ b/make_post_sell/templates/product.j2 @@ -134,6 +134,7 @@ {% endfor %} +


@@ -180,6 +181,7 @@
Back to shop
+
{% if request.shop.watch_mode_enabled %}{% endif %}