From 2ec9c5fc746686a4c3ae73022fc01741698eeb70 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Wed, 24 Sep 2025 16:55:11 -0400
Subject: [PATCH] Convert crypto quotes history to use CSS Grid consistently

- Replace flexbox layout with CSS Grid for header section
- Add align-items: start for proper grid alignment
- Add justify-self: end for button positioning
- Add empty div placeholder when no received amount to maintain grid structure
- Ensure all layouts use CSS Grid for consistency
---
 make_post_sell/templates/crypto_quotes_history.j2 | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/make_post_sell/templates/crypto_quotes_history.j2 b/make_post_sell/templates/crypto_quotes_history.j2
index ae72681..894d71a 100644
--- a/make_post_sell/templates/crypto_quotes_history.j2
+++ b/make_post_sell/templates/crypto_quotes_history.j2
@@ -10,7 +10,7 @@
     <div style="margin: 20px 0;">
       {% for payment in payments %}
         <div style="border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; margin-bottom: 15px; background: #f8f9fa;">
-          <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
+          <div style="display: grid; grid-template-columns: 1fr auto; align-items: start; margin-bottom: 10px;">
             <div>
               <h4 style="margin: 0 0 5px 0;">
                 {{ payment.coin_name }} ({{ payment.coin_type }}) Payment
@@ -26,7 +26,7 @@
             </div>
           </div>
           
-          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 10px 0;">
+          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 10px 0; align-items: start;">
             <div>
               <strong>Expected Amount:</strong><br>
               {% if payment.coin_type == 'XMR' %}
@@ -51,9 +51,11 @@
                 <small style="color: #6c757d;">{{ payment.confirmations }}/{{ payment.confirmations_required }} confirmations</small>
               {% endif %}
             </div>
+            {% else %}
+            <div></div>
             {% endif %}
             
-            <div style="text-align: right;">
+            <div style="text-align: right; justify-self: end;">
               {% if payment.status == 'confirmed' or payment.status == 'confirmed-overpaid' %}
                 {% if payment.has_invoice %}
                   <a href="{{ request.route_url('view_invoice', invoice_id=payment.invoice_id) }}" class="mps-button" style="background: #28a745;">