From 31a9466bf8be01e808aa6f340b9a7308305bec50 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Fri, 24 May 2024 07:11:05 +0200
Subject: [PATCH] Dashboard: Add table-responsive wrapper for transactions and
 invoices (#6006)

Fixes #5721.
---
 .../StoreRecentInvoices/Default.cshtml        |  54 ++++-----
 .../StoreRecentTransactions/Default.cshtml    | 108 +++++++++---------
 BTCPayServer/wwwroot/main/site.css            |   2 +-
 3 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/BTCPayServer/Components/StoreRecentInvoices/Default.cshtml b/BTCPayServer/Components/StoreRecentInvoices/Default.cshtml
index 32591d3bf..ba2905908 100644
--- a/BTCPayServer/Components/StoreRecentInvoices/Default.cshtml
+++ b/BTCPayServer/Components/StoreRecentInvoices/Default.cshtml
@@ -34,34 +34,36 @@
     }
     else if (Model.Invoices.Any())
     {
-        <table class="table table-hover mt-3 mb-0">
-            <thead>
-            <tr>
-                <th class="w-125px">Date</th>
-                <th class="text-nowrap">Invoice Id</th>
-                <th>Status</th>
-                <th class="text-end">Amount</th>
-            </tr>
-            </thead>
-            <tbody>
-            @foreach (var invoice in Model.Invoices)
-            {
+        <div class="table-responsive mt-3 mb-0">
+            <table class="table table-hover mb-0">
+                <thead>
                 <tr>
-                    <td>@invoice.Date.ToTimeAgo()</td>
-                    <td>
-                        <a asp-controller="UIInvoice" asp-action="Invoice" asp-route-invoiceId="@invoice.InvoiceId" class="text-break">@invoice.InvoiceId</a>
-                    </td>
-                    <td>
-                        <vc:invoice-status state="invoice.Status" payments="invoice.Details.Payments" invoice-id="@invoice.InvoiceId"
-                           is-archived="invoice.Details.Archived" has-refund="invoice.HasRefund" />
-                    </td>
-                    <td class="text-end">
-                        <span data-sensitive>@DisplayFormatter.Currency(invoice.Amount, invoice.Currency)</span>
-                    </td>
+                    <th class="w-125px">Date</th>
+                    <th class="text-nowrap">Invoice Id</th>
+                    <th>Status</th>
+                    <th class="text-end">Amount</th>
                 </tr>
-            }
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                @foreach (var invoice in Model.Invoices)
+                {
+                    <tr>
+                        <td>@invoice.Date.ToTimeAgo()</td>
+                        <td>
+                            <a asp-controller="UIInvoice" asp-action="Invoice" asp-route-invoiceId="@invoice.InvoiceId" class="text-break">@invoice.InvoiceId</a>
+                        </td>
+                        <td>
+                            <vc:invoice-status state="invoice.Status" payments="invoice.Details.Payments" invoice-id="@invoice.InvoiceId"
+                               is-archived="invoice.Details.Archived" has-refund="invoice.HasRefund" />
+                        </td>
+                        <td class="text-end">
+                            <span data-sensitive>@DisplayFormatter.Currency(invoice.Amount, invoice.Currency)</span>
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
     }
     else
     {
diff --git a/BTCPayServer/Components/StoreRecentTransactions/Default.cshtml b/BTCPayServer/Components/StoreRecentTransactions/Default.cshtml
index 65bbccf52..c64a8383c 100644
--- a/BTCPayServer/Components/StoreRecentTransactions/Default.cshtml
+++ b/BTCPayServer/Components/StoreRecentTransactions/Default.cshtml
@@ -31,61 +31,63 @@
     }
     else if (Model.Transactions.Any())
     {
-        <table class="table table-hover mt-3 mb-0">
-            <thead>
-            <tr>
-                <th class="w-125px">Date</th>
-                <th>Transaction</th>
-                <th>Labels</th>
-                <th class="text-end">Amount</th>
-            </tr>
-            </thead>
-            <tbody>
-            @foreach (var tx in Model.Transactions)
-            {
+        <div class="table-responsive mt-3 mb-0">
+            <table class="table table-hover mb-0">
+                <thead>
                 <tr>
-                    <td>@tx.Timestamp.ToTimeAgo()</td>
-                    <td>
-                        <vc:truncate-center text="@tx.Id" link="@tx.Link" classes="truncate-center-id" />
-                    </td>
-                    <td>
-                        @if (tx.Labels.Any())
-                        {
-                            <div class="d-flex flex-wrap gap-2 align-items-center">
-                                @foreach (var label in tx.Labels)
-                                {
-                                    <div class="transaction-label" style="--label-bg:@label.Color;--label-fg:@label.TextColor">
-                                        <span>@label.Text</span>
-                                        @if (!string.IsNullOrEmpty(label.Link))
-                                        {
-                                            <a class="transaction-label-info transaction-details-icon" href="@label.Link"
-                                               target="_blank" rel="noreferrer noopener" title="@label.Tooltip" data-bs-html="true"
-                                               data-bs-toggle="tooltip" data-bs-custom-class="transaction-label-tooltip">
-                                                <vc:icon symbol="info" />
-                                            </a>
-                                        }
-                                    </div>
-                                }
-                            </div>
-                        }
-                        
-                    </td>
-                    @if (tx.Positive)
-                    {
-                        <td class="text-end text-success">
-                            <span data-sensitive>@DisplayFormatter.Currency(tx.Balance, tx.Currency)</span>
-                        </td>
-                    }
-                    else
-                    {
-                        <td class="text-end text-danger">
-                            <span data-sensitive>@DisplayFormatter.Currency(tx.Balance, tx.Currency)</span>
-                        </td>
-                    }
+                    <th class="w-125px">Date</th>
+                    <th>Transaction</th>
+                    <th>Labels</th>
+                    <th class="text-end">Amount</th>
                 </tr>
-            }
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                @foreach (var tx in Model.Transactions)
+                {
+                    <tr>
+                        <td>@tx.Timestamp.ToTimeAgo()</td>
+                        <td>
+                            <vc:truncate-center text="@tx.Id" link="@tx.Link" classes="truncate-center-id" />
+                        </td>
+                        <td>
+                            @if (tx.Labels.Any())
+                            {
+                                <div class="d-flex flex-wrap gap-2 align-items-center">
+                                    @foreach (var label in tx.Labels)
+                                    {
+                                        <div class="transaction-label" style="--label-bg:@label.Color;--label-fg:@label.TextColor">
+                                            <span>@label.Text</span>
+                                            @if (!string.IsNullOrEmpty(label.Link))
+                                            {
+                                                <a class="transaction-label-info transaction-details-icon" href="@label.Link"
+                                                   target="_blank" rel="noreferrer noopener" title="@label.Tooltip" data-bs-html="true"
+                                                   data-bs-toggle="tooltip" data-bs-custom-class="transaction-label-tooltip">
+                                                    <vc:icon symbol="info" />
+                                                </a>
+                                            }
+                                        </div>
+                                    }
+                                </div>
+                            }
+                            
+                        </td>
+                        @if (tx.Positive)
+                        {
+                            <td class="text-end text-success">
+                                <span data-sensitive>@DisplayFormatter.Currency(tx.Balance, tx.Currency)</span>
+                            </td>
+                        }
+                        else
+                        {
+                            <td class="text-end text-danger">
+                                <span data-sensitive>@DisplayFormatter.Currency(tx.Balance, tx.Currency)</span>
+                            </td>
+                        }
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
     }
     else
     {
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index 41bccdf79..af6deed2a 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -464,7 +464,7 @@ h2 .icon.icon-info {
     font-weight: var(--btcpay-font-weight-bold);
 }
 
-.widget .table {
+.widget *:not([class*='table-responsive']) > .table {
     margin-left: -.5rem;
     margin-right: -.5rem;
     width: calc(100% + 1rem);