web-wallet: Fix content alignment regression

Resolves #1988
dusk-network · Jul 22, 2024 · 9d02259 · 9d02259
1 parent 18c9f34
commit 9d02259
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/web-wallet/src/lib/components/Transactions/Transactions.svelte b/web-wallet/src/lib/components/Transactions/Transactions.svelte
@@ -172,10 +172,7 @@
     .transactions-list {
       display: grid;
       grid-template-columns: max-content auto;
-
-      &__loading-container {
-        margin: 1em auto;
-      }
+      width: 100%;
 
       &__term {
         background-color: var(--background-color-alt);
@@ -189,6 +186,10 @@
         text-transform: uppercase;
       }
 
+      &__loading-container {
+        margin: 1em auto;
+      }
+
       &__datum {
         grid-column: 2;
         line-height: 150%;

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Transactions.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Transactions > renders the correct amount of Transactions, as the limit supplied 1`] = `
 <article
-  class="transactions svelte-13w6rnl"
+  class="transactions svelte-1xfwm7e"
 >
   <header
-    class="transactions__header svelte-13w6rnl"
+    class="transactions__header svelte-1xfwm7e"
   >
     <h3
       class="h4"
@@ -256,10 +256,10 @@ exports[`Transactions > renders the correct amount of Transactions, as the limit
 
 exports[`Transactions > renders transactions correctly when items are fulfilled 1`] = `
 <article
-  class="transactions svelte-13w6rnl"
+  class="transactions svelte-1xfwm7e"
 >
   <header
-    class="transactions__header svelte-13w6rnl"
+    class="transactions__header svelte-1xfwm7e"
   >
     <h3
       class="h4"

diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -333,10 +333,10 @@ exports[`Dashboard > should render a card when there is an error getting transac
   </article>
    
   <article
-    class="transactions svelte-13w6rnl"
+    class="transactions svelte-1xfwm7e"
   >
     <header
-      class="transactions__header svelte-13w6rnl"
+      class="transactions__header svelte-1xfwm7e"
     >
       <h3
         class="h4"
@@ -719,10 +719,10 @@ exports[`Dashboard > should render the dashboard page and show a throbber while
   </article>
    
   <article
-    class="transactions svelte-13w6rnl"
+    class="transactions svelte-1xfwm7e"
   >
     <header
-      class="transactions__header svelte-13w6rnl"
+      class="transactions__header svelte-1xfwm7e"
     >
       <h3
         class="h4"
@@ -1110,10 +1110,10 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
   </article>
    
   <article
-    class="transactions svelte-13w6rnl"
+    class="transactions svelte-1xfwm7e"
   >
     <header
-      class="transactions__header svelte-13w6rnl"
+      class="transactions__header svelte-1xfwm7e"
     >
       <h3
         class="h4"

diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -66,10 +66,10 @@ exports[`Dashboard > should render the transactions page 1`] = `
   </article>
    
   <article
-    class="transactions svelte-13w6rnl"
+    class="transactions svelte-1xfwm7e"
   >
     <header
-      class="transactions__header svelte-13w6rnl"
+      class="transactions__header svelte-1xfwm7e"
     >
       <h3
         class="h4"

diff --git a/web-wallet/src/style/dusk-components/suspense.css b/web-wallet/src/style/dusk-components/suspense.css
@@ -1,6 +1,7 @@
 .dusk-suspense {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
   gap: var(--default-gap);