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
This commit is contained in:
Russell Ballestrini 2025-09-24 16:55:11 -04:00
parent eff2808371
commit 2ec9c5fc74

View file

@ -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;">