edit page: file-meta line + thumbnail labels + merged file stats

Per fox's feedback on shop.unturf.com edit page:

- File Type and File Size now stack on a single line with · separator
  (was 2 stacked <p> tags). Class file-meta on the wrapper, file-meta-item
  on each child. Applied to product, preview, thumbnail blocks.

- File Statistics removed as a standalone well; "Total capacity" line
  moved into the upload-product well at top, using the same file-meta
  pattern. Eliminates the half-empty 4th column in the 2-col grid.

- Thumbnail upload sections now have an <h4 class="thumbnail-label">
  showing thumbnail1 / thumbnail2 / etc. so owners can tell which slot
  is the cover (thumbnail1 shows on search pages) vs additional images.

- Description label split fix: the label, helper text, and textarea
  are now properly stacked. The section.product-title-and-description
  rule (display: grid for product page) is overridden to display: block
  on the edit page so the form flows normally.

- Helper text under the Description label uses <small class="form-help">
  with token-based styling.

- Textarea max-width 600px lifted on the edit page so it fills the
  available well width.

Styleguide entries added at /styleguide for: file-meta line, thumbnail
label, form-help.

Tests still pass (10 in target slice).

make_post_sell/static/css/common.css

@@ -1354,6 +1354,61 @@ div.edit-page fieldset label.visibility_radio {
     line-height: 1.6;
 }
 
+/* Override: section.product-title-and-description uses display:grid by
+   default to lay out product/content pages. On the edit page, the form
+   inside it should flow as normal block layout — no grid splitting. */
+div.edit-page > section.product-title-and-description {
+    display: block;
+}
+
+/* File metadata line — File Type · File Size on a single line.
+   Used in the upload/preview/thumbnail blocks of the edit page. */
+.file-meta {
+    margin: var(--space-1, 4px) 0;
+    color: var(--color-text-muted, #666);
+    font-size: 0.9em;
+}
+
+.file-meta-item {
+    display: inline-block;
+}
+
+.file-meta-item + .file-meta-item::before {
+    content: " · ";
+    color: var(--color-text-muted, #aaa);
+    margin: 0 var(--space-1, 4px);
+}
+
+.file-meta.total-capacity {
+    margin-top: var(--space-2, 8px);
+    margin-bottom: var(--space-3, 12px);
+}
+
+/* Thumbnail label — clearly identifies thumbnail1 / thumbnail2 / etc. */
+.upload-thumbnail-item .thumbnail-label {
+    font-family: monospace;
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin: 0 0 var(--space-2, 8px);
+    color: var(--color-text-primary, #333);
+}
+
+/* Form helper text — small tag below labels that doesn't break layout. */
+.form-help {
+    display: block;
+    color: var(--color-text-muted, #666);
+    font-size: 0.85em;
+    margin: var(--space-1, 4px) 0 var(--space-2, 8px);
+}
+
+/* Textarea inside a well should fill the available width up to a
+   readable cap. Was capped at 600px which leaves dead space in wide
+   2-column wells. */
+div.edit-page textarea.mps-product-description,
+div.edit-page textarea.mps-content-description {
+    max-width: 100%;
+}
+
 hr {
   color: var(--border-light, #EEEEEE);
 }

make_post_sell/templates/product_edit.j2

@@ -83,13 +83,18 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
 
   People may download this file{% if product.is_sellable %} after making a purchase{% endif %}.
 
-  <br>
+  <p class="file-meta total-capacity">
+    <span class="file-meta-item">Total capacity: {{ product.human_total_file_bytes }}</span>
+  </p>
+
   <br>
 
   {% if "product" in product.originals %}
   <p class="bold-text">Current File: {{ product.originals["product"] }}</p>
-  <p>File Type: {{ product.extensions.get("product", "unknown") }}</p>
-  <p>File Size: {{ product.human_file_bytes("product") }}</p>
+  <p class="file-meta">
+    <span class="file-meta-item">File Type: {{ product.extensions.get("product", "unknown") }}</span>
+    <span class="file-meta-item">File Size: {{ product.human_file_bytes("product") }}</span>
+  </p>
 
   {% set ext = product.extensions.get("product", "") %}
   {% if signed_product_url %}
@@ -129,8 +134,10 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
 
   {% if "preview" in product.originals %}
   <p class="bold-text">Current File: {{ product.originals["preview"] }}</p>
-  <p>File Type: {{ product.extensions.get("preview", "unknown") }}</p>
-  <p>File Size: {{ product.human_file_bytes("preview") }}</p>
+  <p class="file-meta">
+    <span class="file-meta-item">File Type: {{ product.extensions.get("preview", "unknown") }}</span>
+    <span class="file-meta-item">File Size: {{ product.human_file_bytes("preview") }}</span>
+  </p>
 
   {% set preview_ext = product.extensions.get("preview", "") %}
   {% set preview_url = request.shop_cdn_endpoint ~ "/" ~ product.s3_path ~ "/preview?ts=" ~ product.updated_timestamp %}
@@ -192,10 +199,14 @@ Your cover (<code>thumbnail1</code>) will show up on search pages.
   {% endif %}
   {% endif %}
 
+  <h4 class="thumbnail-label">{{ thumbnail_key }}</h4>
+
   {% if thumbnail_key in product.originals %}
   <p class="bold-text">Current File: {{ product.originals[thumbnail_key] }}</p>
-  <p>File Type: {{ product.extensions.get(thumbnail_key, "unknown") }}</p>
-  <p>File Size: {{ product.human_file_bytes(thumbnail_key) }}</p>
+  <p class="file-meta">
+    <span class="file-meta-item">File Type: {{ product.extensions.get(thumbnail_key, "unknown") }}</span>
+    <span class="file-meta-item">File Size: {{ product.human_file_bytes(thumbnail_key) }}</span>
+  </p>
   {% endif %}
 
   {% set signed_post = signed_posts[thumbnail_key] %}
@@ -216,11 +227,6 @@ Your cover (<code>thumbnail1</code>) will show up on search pages.
 {% endfor %}
 </section>
 
-<section class="file-statistics well2">
-  <h3>File Statistics</h3>
-  <p><b>Total Capacity:</b> {{ product.human_total_file_bytes }}</p>
-</section>
-
 <section class="product-title-and-description well2">
   <form method="post" action="{{ product.absolute_edit_url(request) }}" onsubmit="submit.disabled = true; return true;">
   <h3>Edit Title, Description, or Visibility</h3>
@@ -238,7 +244,11 @@ Your cover (<code>thumbnail1</code>) will show up on search pages.
     <br />
     <br />
 
-    <label for="description_input">Description <a href="{{ product.absolute_edit_url(request, subject='description') }}">(advanced editor)</a></label> Supports Markdown and some HTML
+    <label for="description_input">
+      Description
+      <a href="{{ product.absolute_edit_url(request, subject='description') }}">(advanced editor)</a>
+    </label>
+    <small class="form-help">Supports Markdown and some HTML.</small>
     <textarea
         name        = "description"
         id          = "description_input"

make_post_sell/templates/styleguide.j2

@@ -1078,6 +1078,42 @@ CSS:      .login-card, .login-form-*</div>
 
   <br/>
 
+  {# Edit-page patterns #}
+  <h2>Edit page patterns</h2>
+
+  <p>Used on product / content edit forms.</p>
+
+  <h3>File metadata line</h3>
+  <p>Stack file type and size on a single line with a · separator. Use class <code>file-meta</code> on the wrapping <code>&lt;p&gt;</code> and <code>file-meta-item</code> on each child span.</p>
+  <div class="well" style="margin-bottom: var(--space-4);">
+    <p class="bold-text">Current File: example.pdf</p>
+    <p class="file-meta">
+      <span class="file-meta-item">File Type: pdf</span>
+      <span class="file-meta-item">File Size: 1.1MiB</span>
+    </p>
+  </div>
+
+  <h3>Thumbnail label</h3>
+  <p>Monospace label that identifies which thumbnail slot is which (thumbnail1 = cover, thumbnail2-4 = additional). Use <code>&lt;h4 class="thumbnail-label"&gt;thumbnail1&lt;/h4&gt;</code> above each upload widget.</p>
+  <div class="upload-thumbnail-item well" style="margin-bottom: var(--space-4);">
+    <h4 class="thumbnail-label">thumbnail1</h4>
+    <p class="bold-text">Current File: cover.jpg</p>
+    <p class="file-meta">
+      <span class="file-meta-item">File Type: jpg</span>
+      <span class="file-meta-item">File Size: 32.6KiB</span>
+    </p>
+  </div>
+
+  <h3>Form helper text</h3>
+  <p>Small, muted line below a label that gives extra context without breaking the form layout. Class <code>form-help</code>.</p>
+  <div class="well" style="margin-bottom: var(--space-4);">
+    <label for="sg-help-input">Description</label>
+    <small class="form-help">Supports Markdown and some HTML.</small>
+    <textarea id="sg-help-input" rows="2" style="width:100%;" placeholder="Type here..."></textarea>
+  </div>
+
+  <br/>
+
   {# MPS-20 + MPS-21: Auction & Offer components #}
   <h2>Auction (MPS-20) and Offer (MPS-21)</h2>