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 <[email protected]>
Automattic · Jan 29, 2025 · df56a5b · df56a5b
1 parent 0bb16c9
commit df56a5b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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 {