From 769cbd2bb6ce95a77dd05b309c1b8cfcb559bb52 Mon Sep 17 00:00:00 2001
From: Cindy <cindysanford@gmail.com>
Date: Fri, 22 Aug 2025 04:15:05 -0300
Subject: [PATCH] Fix icon spacing issues in multiple UI components (#6886)

- Add gap-2 spacing for Uninstall button warning icon in plugins list
- Add p-2 padding for date format toggle icon in invoices list
- Add gap-2 spacing for View details dropdown icon in checkout

This ensures consistent 0.5rem spacing between text and icons across all affected components.

Fixes #6880
---
 BTCPayServer/Views/UIInvoice/Checkout.cshtml     | 6 +++---
 BTCPayServer/Views/UIInvoice/ListInvoices.cshtml | 2 +-
 BTCPayServer/Views/UIServer/ListPlugins.cshtml   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/BTCPayServer/Views/UIInvoice/Checkout.cshtml b/BTCPayServer/Views/UIInvoice/Checkout.cshtml
index 99747550d..2adf48eba 100644
--- a/BTCPayServer/Views/UIInvoice/Checkout.cshtml
+++ b/BTCPayServer/Views/UIInvoice/Checkout.cshtml
@@ -74,7 +74,7 @@
                         <div v-if="showPaymentDueInfo" v-html="replaceNewlines($t('still_due', { amount: `${srvModel.due} ${srvModel.paymentMethodCurrency}` }))"></div>
                     </div>
                 </div>
-                <button id="DetailsToggle" class="d-flex align-items-center gap-1 btn btn-link payment-details-button mb-2" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
+                <button id="DetailsToggle" class="d-flex align-items-center gap-2 btn btn-link payment-details-button mb-2" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
                     <span class="fw-semibold" v-t="'view_details'"></span>
                     <vc:icon symbol="caret-down" />
                 </button>
@@ -142,7 +142,7 @@
                                 :show-recommended-fee="showRecommendedFee"
                                 v-collapsible="displayPaymentDetails" />
                         </div>
-                        <button class="d-flex align-items-center gap-1 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
+                        <button class="d-flex align-items-center gap-2 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
                             <span class="fw-semibold" v-t="'view_details'"></span>
                             <vc:icon symbol="caret-down" />
                         </button>
@@ -212,7 +212,7 @@
                                 :show-recommended-fee="showRecommendedFee"
                                 v-collapsible="displayPaymentDetails" />
                         </div>
-                        <button class="d-flex align-items-center gap-1 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
+                        <button class="d-flex align-items-center gap-2 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
                             <span class="fw-semibold" v-t="'view_details'"></span>
                             <vc:icon symbol="caret-down" />
                         </button>
diff --git a/BTCPayServer/Views/UIInvoice/ListInvoices.cshtml b/BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
index ad44188aa..d3920b33e 100644
--- a/BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
+++ b/BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
@@ -328,7 +328,7 @@
                         <th class="date-col">
                             <div class="d-flex align-items-center gap-1">
                                 <span text-translate="true">Date</span>
-                                <button type="button" class="btn btn-link p-0 switch-time-format only-for-js" title="@StringLocalizer["Switch date format"]">
+                                <button type="button" class="btn btn-link p-2 switch-time-format only-for-js" title="@StringLocalizer["Switch date format"]">
                                     <vc:icon symbol="time" />
                                 </button>
                             </div>
diff --git a/BTCPayServer/Views/UIServer/ListPlugins.cshtml b/BTCPayServer/Views/UIServer/ListPlugins.cshtml
index 2a4712458..3da7565d3 100644
--- a/BTCPayServer/Views/UIServer/ListPlugins.cshtml
+++ b/BTCPayServer/Views/UIServer/ListPlugins.cshtml
@@ -289,7 +289,7 @@
                             }
                             @if (DependentOn(plugin.Identifier))
                             {
-                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="tooltip" title="This plugin cannot be uninstalled as it is depended on by other plugins.">
+                                <button type="button" class="btn btn-outline-danger d-flex align-items-center gap-3" data-bs-toggle="tooltip" title="This plugin cannot be uninstalled as it is depended on by other plugins.">
                                     <span text-translate="true">Uninstall</span>
                                     <vc:icon symbol="warning"/>
                                 </button>