From df56a5b918d85821e29c2215cd236783fa15d85e Mon Sep 17 00:00:00 2001
From: Bill Robbins <billrobbins@users.noreply.github.com>
Date: Wed, 29 Jan 2025 08:44:52 -0600
Subject: [PATCH] Use flexbox gap to position currency symbol with the tax
 information string (#98943)

* Correct spacing with tax inclusive pricing in Billing History DataView

* Center loading spinner

---------

Co-authored-by: Bill Robbins <bill.robbins@automattic.com>
---
 .../billing-history/style-data-view.scss      | 20 +++++++++++++++----
 .../me/purchases/billing-history/style.scss   |  1 -
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/me/purchases/billing-history/style-data-view.scss b/client/me/purchases/billing-history/style-data-view.scss
index 7f2e3a68a84cd..5fe305448ed38 100644
--- a/client/me/purchases/billing-history/style-data-view.scss
+++ b/client/me/purchases/billing-history/style-data-view.scss
@@ -5,6 +5,18 @@
         margin-bottom: 1rem;
         padding: 0 1rem;
 
+        .dataviews-loading {
+            display: flex;
+            align-items: end;
+            justify-content: center;
+            padding-top: 48px;
+
+            .components-spinner {
+                width: 32px;
+                height: 32px;
+            }
+        }
+
         .dataviews-view-table {
             width: 100%;
             border-collapse: collapse;
@@ -112,6 +124,10 @@
                 font-size: 0.875rem;
                 color: var(--color-text-subtle);
             }
+
+            &-wrapper {
+                gap: 4px;
+            }
         }
 
         .dataviews-view-table__cell-actions {
@@ -145,10 +161,6 @@
         }
     }
 
-    .dataviews-no-results, .dataviews-loading {
-        min-height: 500px;
-    }
-
     .dataviews__view-actions {
         margin-top: 1em;
 		padding-left: 0;
diff --git a/client/me/purchases/billing-history/style.scss b/client/me/purchases/billing-history/style.scss
index c17de556b3baa..7e3fafa050cd4 100644
--- a/client/me/purchases/billing-history/style.scss
+++ b/client/me/purchases/billing-history/style.scss
@@ -83,7 +83,6 @@
 	color: var(--color-text-subtle);
 	font-size: $font-body-extra-small;
 	white-space: nowrap;
-	margin-left: 0.3rem;
 }
 
 .billing-history__transaction-tax-amount {