edit page: thumbnails header flex row, grid for thumbnails below

Per fox: the thumbnails card layout was a mess — the h3, descriptor
text, and thumbnail items were all crammed into a single grid with
auto-fit columns, so thumbnail 1+2 sat on the same row as the header
and thumbnails 3+4 wrapped to row 2 leaving the left half empty.

Fix: restructure to a proper header + grid:

  <section class="upload-thumbnails well2 edit-card-full">
    <div class="upload-thumbnails-header">
      <h3>... icon + title ...</h3>
      <p class="upload-thumbnails-hint">Your cover ...</p>
    </div>
    <div class="upload-thumbnails-grid">
      <div class="upload-thumbnail-item">...</div>
      ... (4 thumbnails)
    </div>
  </section>

CSS:
- .upload-thumbnails-header: flex row, space-between, wraps on narrow
  screens; h3 grows, hint right-aligned + max-width 320px
- .upload-thumbnails-grid: auto-fit minmax(240px, 1fr) for the 4
  thumbnail slots, gap --space-4

Result: header reads cleanly across the top with the cover descriptor
on the right, and all 4 thumbnails sit in a clean grid below.

Tests still pass (9 in target slice).

make_post_sell/static/css/common.css

@@ -1569,15 +1569,8 @@ div.edit-page > section.edit-card-full {
     grid-column: 1 / -1;
 }
 
-/* On the thumbnails card the descriptor section (Your cover ... will
-   show up on search pages) sits to the right of the h3 header inside
-   the section.upload-thumbnails inner grid. Right-align its text so
-   it reads as a caption beside the header. */
-section.upload-thumbnails > section:first-of-type {
-    text-align: right;
-    justify-self: end;
-    align-self: center;
-}
+/* Thumbnails header laid out via .upload-thumbnails-header flex row
+   above the .upload-thumbnails-grid (see below). */
 
 hr {
   color: var(--border-light, #EEEEEE);
@@ -1587,11 +1580,35 @@ section.upload-product-and-preview {
 }
 
 section.upload-thumbnails {
+    /* Header + grid layout — see .upload-thumbnails-header and
+       .upload-thumbnails-grid below for the inner structure. */
+}
+
+.upload-thumbnails-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--space-4, 16px);
+    flex-wrap: wrap;
+}
+
+.upload-thumbnails-header h3 {
+    margin: 0;
+    flex: 1 1 auto;
+}
+
+.upload-thumbnails-hint {
+    margin: 0;
+    color: var(--color-text-muted, #666);
+    text-align: right;
+    max-width: 320px;
+}
+
+.upload-thumbnails-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    grid-auto-columns: max-content;
-    grid-auto-flow: dense;
-    grid-gap: 14px;
+    grid-gap: var(--space-4, 16px);
+    margin-top: var(--space-4, 16px);
 }
 
 section.windows-95-task-bar {

make_post_sell/templates/product_edit.j2

@@ -202,19 +202,21 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
 </section>
 
 <section class="upload-thumbnails well2 edit-card-full">
-<h3>
-  <span class="edit-card-icon">&#127912;</span>
-  Upload or Replace Thumbnail Files
-</h3>
 
-<section>
-Your cover (<code>thumbnail1</code>) will show up on search pages.
-<br />
-<br />
-</section>
+<div class="upload-thumbnails-header">
+  <h3>
+    <span class="edit-card-icon">&#127912;</span>
+    Upload or Replace Thumbnail Files
+  </h3>
+  <p class="upload-thumbnails-hint">
+    Your cover (<code>thumbnail1</code>) will show up on search pages.
+  </p>
+</div>
 
 {% set s3_key_thumbnails = product.s3_key_thumbnails %}
 
+<div class="upload-thumbnails-grid">
+
 {% for thumbnail_key in product.file_thumbnail_keys %}
 
   <div class="upload-thumbnail-item">
@@ -261,6 +263,8 @@ Your cover (<code>thumbnail1</code>) will show up on search pages.
   </div>
 
 {% endfor %}
+
+</div>
 </section>
 
 <section class="product-title-and-description well2 edit-card-full">