From dbc7453a4ee1c52d30dd34cd348941bbaca76ad2 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 10 May 2026 18:26:50 -0400
Subject: [PATCH] edit page: thumbnail item card layout, consistent heights,
 fills width

Per fox: thumbnails "not aligned properly" and "not using horizontal
space properly". Two issues:

1) Grid was at minmax(240px, 1fr) which on the full-card-width row
   often fit 3 columns instead of 4 (240 * 4 + gaps > available
   space). Lowered to minmax(200px, 1fr) so the auto-fit gives 4
   columns on a standard desktop edit card.

2) Each upload-thumbnail-item now renders as a sub-card:
   - flex-direction: column with consistent gap
   - background --surface-dim, --color-border, --radius-md
   - preview image fixed 140px height + object-fit: contain so all
     thumbnails align even when some slots are empty or have different
     aspect ratios
   - form pushed to bottom via margin-top: auto, so the upload buttons
     line up across cells regardless of how much text is above
   - p.bold-text break-word so long filenames don't blow out the cell
   - the legacy <hr/> separator between items is hidden inside the grid
     (it was a vertical-flow artifact)

The grid uses align-items: stretch so all 4 cells have equal height.

Tests still pass (9 in target slice).
---
 make_post_sell/static/css/common.css | 36 +++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index fb1ca76..a70281e 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1606,9 +1606,43 @@ section.upload-thumbnails {
 
 .upload-thumbnails-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-gap: var(--space-4, 16px);
     margin-top: var(--space-4, 16px);
+    align-items: stretch;
+}
+
+.upload-thumbnails-grid .upload-thumbnail-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 8px);
+    padding: var(--space-3, 12px);
+    background: var(--surface-dim, #f9f9fa);
+    border: 1px solid var(--color-border, #eee);
+    border-radius: var(--radius-md, 8px);
+    min-width: 0;
+}
+
+.upload-thumbnails-grid .upload-thumbnail-item .edit-media-preview {
+    width: 100%;
+    max-width: 100%;
+    height: 140px;
+    object-fit: contain;
+    background: var(--surface, #fff);
+    border-radius: var(--radius-sm, 4px);
+}
+
+.upload-thumbnails-grid .upload-thumbnail-item p.bold-text {
+    word-break: break-word;
+    margin: 0;
+}
+
+.upload-thumbnails-grid .upload-thumbnail-item form {
+    margin-top: auto;
+}
+
+.upload-thumbnails-grid .upload-thumbnail-item hr {
+    display: none;
 }
 
 section.windows-95-task-bar {