From 1c957534d5f5ed8a56604074792e9e4836a5aee5 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Wed, 24 Sep 2025 18:32:30 -0400
Subject: [PATCH] Move status, expiry and payment ID next to QR code

- Use two-column grid: QR code on left, all payment info on right
- Move status, expiry countdown, and payment ID into right column
- Keep payment address and amount at top of right column
- Maintains visual hierarchy with all payment details together
- Buttons remain below in separate grid
---
 make_post_sell/templates/crypto_checkout.j2 | 36 ++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/make_post_sell/templates/crypto_checkout.j2 b/make_post_sell/templates/crypto_checkout.j2
index 2f6ef63..7d69860 100644
--- a/make_post_sell/templates/crypto_checkout.j2
+++ b/make_post_sell/templates/crypto_checkout.j2
@@ -11,13 +11,26 @@
     {% else %}
       {% set amount_fmt = '%.8f' % amount_crypto %}
     {% endif %}
-    <div style="display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0;">
-      <div style="text-align: center;">
-        <div id="payment-qr" style="display: inline-block;"></div>
+    <div style="display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: 16px 0; align-items: start;">
+      <div>
+        <div id="payment-qr"></div>
       </div>
       <div>
         <p>Send exactly <b id="crypto-amount">{{ amount_fmt }}</b> {{ coin_symbol }} to this address:</p>
         <pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
+        
+        <p style="margin-top: 15px;">Status: <span id="status">{{ status }}</span></p>
+        <p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
+          Confirmations: <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
+        </p>
+        <p>
+          {% if expires_at %}
+            Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
+          {% endif %}
+        </p>
+        <p>
+          <small>Payment ID: <code id="payment-id">{{ payment_id }}</code></small>
+        </p>
       </div>
     </div>
 
@@ -29,19 +42,6 @@
       <button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red" style="grid-column: 1 / -1; grid-row: 2;">Cancel Quote</button>
       {% endif %}
     </div>
-
-    <p>Status: <span id="status">{{ status }}</span></p>
-    <p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
-      Confirmations: <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
-    </p>
-    <p>
-      {% if expires_at %}
-        Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
-      {% endif %}
-    </p>
-    <p>
-      <small>Payment ID: <code id="payment-id">{{ payment_id }}</code></small>
-    </p>
     
     <div id="received" style="display:none;">
       <small>Received: <span id="recv-piconero"></span> / <span id="exp-piconero"></span> piconero</small>
@@ -143,7 +143,7 @@
         // Remove payment elements to prevent double-sending (for received status)
         function removePaymentElements() {
           const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
-          const paymentGrid = document.querySelector('div[style*="grid-template-columns: 1fr"][style*="gap: 10px"]');
+          const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
           
           // Remove the entire payment grid (QR code and instructions)
           if (paymentGrid) {
@@ -166,7 +166,7 @@
         // Replace action buttons with invoice link for terminal statuses
         function replaceButtonsWithInvoiceLink(invoiceUrl) {
           const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
-          const paymentGrid = document.querySelector('div[style*="grid-template-columns: 1fr"][style*="gap: 10px"]');
+          const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
           
           if (!buttonGrid) return;