From f9b73bb9de115c29cd178f0048ee540f1a4fb9e2 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Mon, 11 May 2026 18:13:53 -0400
Subject: [PATCH] product offer form: breathing room around bid + optional
 message
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per fox: "a touch more whitespace around the bid and optional message".
The expanded Make-an-offer form had the label, amount input, message
input, and submit button stacked flush against each other inside the
$42.00 well — no vertical rhythm.

New .product-offer-form CSS:
- display: grid; gap: var(--space-3, 12px)
- top margin var(--space-3) separates it from the summary button
- inputs get box-sizing: border-box, width: 100%, padding 8px 12px so
  they fill the column with comfortable internal spacing

Grid only.
---
 make_post_sell/static/css/common.css | 21 +++++++++++++++++++++
 make_post_sell/templates/product.j2  |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 8cf8b54..3651f99 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1584,6 +1584,27 @@ div.edit-page > section.edit-card-full {
     grid-column: 1 / -1;
 }
 
+/* Make-an-offer form (expanded from the <details> on product pages).
+   Grid layout gives consistent vertical rhythm — the inputs and label
+   would otherwise sit flush against each other and against the
+   summary button above. */
+.product-offer-form {
+    display: grid;
+    gap: var(--space-3, 12px);
+    margin-top: var(--space-3, 12px);
+}
+
+.product-offer-form label {
+    margin: 0;
+}
+
+.product-offer-form input[type="number"],
+.product-offer-form input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+}
+
 /* Render order on the edit page (CSS order property reorders without
    changing HTML source order):
    1. Edit Title, Description, or Visibility (full width, top)
diff --git a/make_post_sell/templates/product.j2 b/make_post_sell/templates/product.j2
index 28a21b6..1498ead 100644
--- a/make_post_sell/templates/product.j2
+++ b/make_post_sell/templates/product.j2
@@ -245,7 +245,7 @@
     {% if product.offers_allowed and request.user and request.user.authenticated and request.user not in product.shop.owners %}
     <details style="margin-top: var(--space-3)">
       <summary class="mps-button">Make an offer</summary>
-      <form method="POST" action="/p/{{ product.id }}/offer" style="margin-top: var(--space-2)">
+      <form method="POST" action="/p/{{ product.id }}/offer" class="product-offer-form">
         {% include "snippets/csrf.j2" %}
         <label for="offer_amount">Your offer (USD)</label>
         <input type="number" step="0.01" min="0.01" name="amount" id="offer_amount" required />