From 1386fc660c540939676cd1fb89e50cbf79053c56 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 22 Apr 2026 15:18:17 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20cinema=20=E2=80=94=20description+comment?=
 =?UTF-8?q?s=20in=20one=20grid=20cell,=20no=20row=20stretch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously purchase (ring sidebar) spanned grid rows 2 and 3. When
Up Next was tall and description was short, grid distributed the
spanning column's height across both rows — description sat at top
of a stretched row 2 with hundreds of pixels of empty space before
comments.

New structure: wrap description + comments in .cinema-content-stack.
Outside cinema mode the wrapper is display:contents (transparent,
zero effect). In cinema mode it becomes a single grid cell containing
description + comments as an internal stack. Main grid is now just
two rows: images (full width) then content | purchase.

Row 2 height = max(content column, purchase column). If purchase is
taller, content stack still starts at top, and description + comments
stay glued together at the top of the column — comments is reachable
without scrolling past a dead zone.
---
 make_post_sell/static/css/common.css | 35 +++++++++++++++++++++-------
 make_post_sell/templates/content.j2  |  2 ++
 make_post_sell/templates/product.j2  |  2 ++
 3 files changed, 30 insertions(+), 9 deletions(-)

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 @@
     <h1>{{ product.title }}<br/><span class="subtitle-text">uploaded to <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
   </div>
 
+  <div class="cinema-content-stack">
   <div class="product-description">
     <br/>
 
@@ -158,6 +159,7 @@
     <!-- Comments Section -->
     {% include 'snippets/comments.j2' %}
   </div>
+  </div>
 
 {% if request.shop.watch_mode_enabled %}</div>{% 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 %}
   </div>
 
+  <div class="cinema-content-stack">
   <div class="product-description">
     <br/>
     <br/>
@@ -180,6 +181,7 @@
     <br/>
     <a href="/" class="product-edit-button mps-button">Back to shop</a>
   </div>
+  </div>
 
 {% if request.shop.watch_mode_enabled %}</div>{% endif %}