From 536a6f0877d0f92ca073ca9c227f00a74937080d Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Tue, 26 Nov 2024 10:47:13 +0100
Subject: [PATCH] web-wallet: fix balance overflowing on small screens

Resolves #2994
---
 web-wallet/CHANGELOG.md                       |   4 +-
 .../src/lib/components/Balance/Balance.css    |  59 ++++++++
 .../src/lib/components/Balance/Balance.svelte |  37 +----
 .../__snapshots__/Balance.spec.js.snap        | 112 +++++++-------
 .../__snapshots__/layout.spec.js.snap         | 140 +++++++++---------
 .../src/style/dusk-components/balance.css     |  44 ------
 web-wallet/src/style/main.css                 |   1 -
 7 files changed, 194 insertions(+), 203 deletions(-)
 create mode 100644 web-wallet/src/lib/components/Balance/Balance.css
 delete mode 100644 web-wallet/src/style/dusk-components/balance.css

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index b6ac1a99df..73df963c8f 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix auto-sync not working after restoring a wallet [#3042]
 - Fix application crash on empty amount (Stake Flow) [#3036]
 - Fix incorrect fee deduction and negative UI display (Allocate flow) [#3056]
+- Fix button hover style in Dashboard Navigation Menu [#2999]
+- Fix balance overflowing on small screens [#2994]
 
 ## [0.8.0] - 2024-11-19
 
@@ -48,7 +50,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Enhance Allocate flow on full amount allocation [#2938]
 - Broken link in the stake warning [#2990]
 - Change "Transaction created" copy [#2991]
-- Fix button hover style in Dashboard Navigation Menu [#2999]
 - Fix Dashboard navigation menu padding [#3000]
 
 ## [0.7.0] - 2024-11-11
@@ -368,6 +369,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2938]: https://github.com/dusk-network/rusk/issues/2938
 [#2990]: https://github.com/dusk-network/rusk/issues/2990
 [#2991]: https://github.com/dusk-network/rusk/issues/2991
+[#2994]: https://github.com/dusk-network/rusk/issues/2994
 [#2997]: https://github.com/dusk-network/rusk/issues/2997
 [#2999]: https://github.com/dusk-network/rusk/issues/2999
 [#3000]: https://github.com/dusk-network/rusk/issues/3000
diff --git a/web-wallet/src/lib/components/Balance/Balance.css b/web-wallet/src/lib/components/Balance/Balance.css
new file mode 100644
index 0000000000..e69d490f63
--- /dev/null
+++ b/web-wallet/src/lib/components/Balance/Balance.css
@@ -0,0 +1,59 @@
+.dusk-balance {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 100%;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.875rem;
+}
+
+.dusk-balance__account {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--background-color);
+  padding: 0.78125rem 0.9375rem;
+  border-radius: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.dusk-balance__dusk {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  justify-content: center;
+  font-size: clamp(1rem, 4.5dvw, 2.1875rem);
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: -0.0175rem;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dusk-balance__fiat {
+  margin-bottom: 1.25rem;
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.01rem;
+  visibility: hidden;
+  color: var(--muted-color);
+}
+
+.dusk-balance__fiat--visible {
+  visibility: unset;
+}
+
+.dusk-balance__value {
+  font-size: clamp(1rem, 4.5dvw, 1.25rem);
+  justify-content: end;
+}
+
+.dusk-balance__percentage,
+.dusk-balance__value {
+  display: flex;
+  gap: 0.625rem;
+  align-items: center;
+  flex: 1;
+}
diff --git a/web-wallet/src/lib/components/Balance/Balance.svelte b/web-wallet/src/lib/components/Balance/Balance.svelte
index 92349b60a6..4d60d374c4 100644
--- a/web-wallet/src/lib/components/Balance/Balance.svelte
+++ b/web-wallet/src/lib/components/Balance/Balance.svelte
@@ -8,6 +8,8 @@
   import { logo } from "$lib/dusk/icons";
   import { createNumberFormatter } from "$lib/dusk/number";
 
+  import "./Balance.css";
+
   /** @type {string | undefined} */
   export let className = undefined;
 
@@ -54,16 +56,16 @@
     <h2 class="sr-only">Your Balance:</h2>
   </header>
   <p class="dusk-balance__dusk">
-    <strong>{duskFormatter(totalBalance)}</strong>
-    <strong>{tokenCurrency}</strong>
+    <span>{duskFormatter(totalBalance)}</span>
+    <span>{tokenCurrency}</span>
   </p>
   <p
     class="dusk-balance__fiat"
     class:dusk-balance__fiat--visible={fiatPrice !== undefined}
   >
-    <strong>
+    <span>
       {fiatFormatter(fiatPrice ? fiatPrice * totalBalance : 0)}
-    </strong>
+    </span>
   </p>
 
   <Card className="dusk-balance__usage-details">
@@ -101,30 +103,3 @@
     </div>
   </Card>
 </article>
-
-<style lang="postcss">
-  .dusk-balance__account {
-    display: flex;
-    justify-content: space-between;
-    background-color: var(--background-color);
-    padding: 0.625em 0.75em 0.625em 0.75em;
-    border-radius: 1.5em;
-  }
-
-  .dusk-balance__percentage,
-  .dusk-balance__value {
-    display: flex;
-    gap: var(--small-gap);
-    align-items: center;
-  }
-
-  :global(.dusk-balance) {
-    font-size: 1.25em;
-    font-weight: 500;
-    line-height: 1.5em;
-  }
-
-  .dusk-balance__fiat {
-    margin-bottom: 1em;
-  }
-</style>
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
index 33dc17263b..d1621be11d 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Balance > renders the Balance component 1`] = `
 <article
-  class="dusk-balance svelte-ila1ms"
+  class="dusk-balance"
 >
   <header
     class="dusk-balance__header"
@@ -17,21 +17,21 @@ exports[`Balance > renders the Balance component 1`] = `
   <p
     class="dusk-balance__dusk"
   >
-    <strong>
+    <span>
       0.003000000
-    </strong>
+    </span>
      
-    <strong>
+    <span>
       DUSK
-    </strong>
+    </span>
   </p>
    
   <p
-    class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+    class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
-    <strong>
+    <span>
       $0.03
-    </strong>
+    </span>
   </p>
    
   <div
@@ -42,10 +42,10 @@ exports[`Balance > renders the Balance component 1`] = `
       class="dusk-card__body-container"
     >
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -64,7 +64,7 @@ exports[`Balance > renders the Balance component 1`] = `
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.001000000
           <svg
@@ -83,10 +83,10 @@ exports[`Balance > renders the Balance component 1`] = `
       </div>
        
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -105,7 +105,7 @@ exports[`Balance > renders the Balance component 1`] = `
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.002000000
           <svg
@@ -131,7 +131,7 @@ exports[`Balance > renders the Balance component 1`] = `
 
 exports[`Balance > should not display the fiat value if the fiat price is \`undefined\` 1`] = `
 <article
-  class="dusk-balance svelte-ila1ms"
+  class="dusk-balance"
 >
   <header
     class="dusk-balance__header"
@@ -146,21 +146,21 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
   <p
     class="dusk-balance__dusk"
   >
-    <strong>
+    <span>
       0.003000000
-    </strong>
+    </span>
      
-    <strong>
+    <span>
       DUSK
-    </strong>
+    </span>
   </p>
    
   <p
-    class="dusk-balance__fiat svelte-ila1ms"
+    class="dusk-balance__fiat"
   >
-    <strong>
+    <span>
       $0.00
-    </strong>
+    </span>
   </p>
    
   <div
@@ -171,10 +171,10 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
       class="dusk-card__body-container"
     >
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -193,7 +193,7 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.001000000
           <svg
@@ -212,10 +212,10 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
       </div>
        
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -234,7 +234,7 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.002000000
           <svg
@@ -260,7 +260,7 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
 
 exports[`Balance > should update the Balance component when the props change 1`] = `
 <article
-  class="dusk-balance svelte-ila1ms"
+  class="dusk-balance"
 >
   <header
     class="dusk-balance__header"
@@ -275,21 +275,21 @@ exports[`Balance > should update the Balance component when the props change 1`]
   <p
     class="dusk-balance__dusk"
   >
-    <strong>
+    <span>
       0.003000000
-    </strong>
+    </span>
      
-    <strong>
+    <span>
       DUSK
-    </strong>
+    </span>
   </p>
    
   <p
-    class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+    class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
-    <strong>
+    <span>
       $0.03
-    </strong>
+    </span>
   </p>
    
   <div
@@ -300,10 +300,10 @@ exports[`Balance > should update the Balance component when the props change 1`]
       class="dusk-card__body-container"
     >
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -322,7 +322,7 @@ exports[`Balance > should update the Balance component when the props change 1`]
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.001000000
           <svg
@@ -341,10 +341,10 @@ exports[`Balance > should update the Balance component when the props change 1`]
       </div>
        
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -363,7 +363,7 @@ exports[`Balance > should update the Balance component when the props change 1`]
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0.002000000
           <svg
@@ -389,7 +389,7 @@ exports[`Balance > should update the Balance component when the props change 1`]
 
 exports[`Balance > should update the Balance component when the props change 2`] = `
 <article
-  class="dusk-balance svelte-ila1ms"
+  class="dusk-balance"
 >
   <header
     class="dusk-balance__header"
@@ -404,21 +404,21 @@ exports[`Balance > should update the Balance component when the props change 2`]
   <p
     class="dusk-balance__dusk"
   >
-    <strong>
+    <span>
       0,003000000
-    </strong>
+    </span>
      
-    <strong>
+    <span>
       DUSK
-    </strong>
+    </span>
   </p>
    
   <p
-    class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+    class="dusk-balance__fiat dusk-balance__fiat--visible"
   >
-    <strong>
+    <span>
       0,06 €
-    </strong>
+    </span>
   </p>
    
   <div
@@ -429,10 +429,10 @@ exports[`Balance > should update the Balance component when the props change 2`]
       class="dusk-card__body-container"
     >
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -451,7 +451,7 @@ exports[`Balance > should update the Balance component when the props change 2`]
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0,000500000
           <svg
@@ -470,10 +470,10 @@ exports[`Balance > should update the Balance component when the props change 2`]
       </div>
        
       <div
-        class="dusk-balance__account svelte-ila1ms"
+        class="dusk-balance__account"
       >
         <span
-          class="dusk-balance__percentage svelte-ila1ms"
+          class="dusk-balance__percentage"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -492,7 +492,7 @@ exports[`Balance > should update the Balance component when the props change 2`]
         </span>
          
         <span
-          class="dusk-balance__value svelte-ila1ms"
+          class="dusk-balance__value"
         >
           0,002500000
           <svg
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index 3f66ed0b7a..fe01f76c7c 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -73,7 +73,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
       </div>
        
       <article
-        class="dusk-balance svelte-ila1ms"
+        class="dusk-balance"
       >
         <header
           class="dusk-balance__header"
@@ -88,21 +88,21 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
         <p
           class="dusk-balance__dusk"
         >
-          <strong>
+          <span>
             3,517.500000000
-          </strong>
+          </span>
            
-          <strong>
+          <span>
             DUSK
-          </strong>
+          </span>
         </p>
          
         <p
-          class="dusk-balance__fiat svelte-ila1ms"
+          class="dusk-balance__fiat"
         >
-          <strong>
+          <span>
             $0.00
-          </strong>
+          </span>
         </p>
          
         <div
@@ -113,10 +113,10 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             class="dusk-card__body-container"
           >
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -135,7 +135,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 2,345.000000000
                 <svg
@@ -154,10 +154,10 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             </div>
              
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -176,7 +176,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 1,172.500000000
                 <svg
@@ -339,7 +339,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
     </div>
      
     <article
-      class="dusk-balance svelte-ila1ms"
+      class="dusk-balance"
     >
       <header
         class="dusk-balance__header"
@@ -354,21 +354,21 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
       <p
         class="dusk-balance__dusk"
       >
-        <strong>
+        <span>
           3,517.500000000
-        </strong>
+        </span>
          
-        <strong>
+        <span>
           DUSK
-        </strong>
+        </span>
       </p>
        
       <p
-        class="dusk-balance__fiat svelte-ila1ms"
+        class="dusk-balance__fiat"
       >
-        <strong>
+        <span>
           $0.00
-        </strong>
+        </span>
       </p>
        
       <div
@@ -379,10 +379,10 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
           class="dusk-card__body-container"
         >
           <div
-            class="dusk-balance__account svelte-ila1ms"
+            class="dusk-balance__account"
           >
             <span
-              class="dusk-balance__percentage svelte-ila1ms"
+              class="dusk-balance__percentage"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -401,7 +401,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
             </span>
              
             <span
-              class="dusk-balance__value svelte-ila1ms"
+              class="dusk-balance__value"
             >
               2,345.000000000
               <svg
@@ -420,10 +420,10 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
           </div>
            
           <div
-            class="dusk-balance__account svelte-ila1ms"
+            class="dusk-balance__account"
           >
             <span
-              class="dusk-balance__percentage svelte-ila1ms"
+              class="dusk-balance__percentage"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -442,7 +442,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
             </span>
              
             <span
-              class="dusk-balance__value svelte-ila1ms"
+              class="dusk-balance__value"
             >
               1,172.500000000
               <svg
@@ -605,7 +605,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
       </div>
        
       <article
-        class="dusk-balance svelte-ila1ms"
+        class="dusk-balance"
       >
         <header
           class="dusk-balance__header"
@@ -620,21 +620,21 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
         <p
           class="dusk-balance__dusk"
         >
-          <strong>
+          <span>
             3,517.500000000
-          </strong>
+          </span>
            
-          <strong>
+          <span>
             DUSK
-          </strong>
+          </span>
         </p>
          
         <p
-          class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+          class="dusk-balance__fiat dusk-balance__fiat--visible"
         >
-          <strong>
+          <span>
             $1,758.75
-          </strong>
+          </span>
         </p>
          
         <div
@@ -645,10 +645,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             class="dusk-card__body-container"
           >
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -667,7 +667,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 2,345.000000000
                 <svg
@@ -686,10 +686,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             </div>
              
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -708,7 +708,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 1,172.500000000
                 <svg
@@ -892,7 +892,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
     </div>
      
     <article
-      class="dusk-balance svelte-ila1ms"
+      class="dusk-balance"
     >
       <header
         class="dusk-balance__header"
@@ -907,21 +907,21 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
       <p
         class="dusk-balance__dusk"
       >
-        <strong>
+        <span>
           3,517.500000000
-        </strong>
+        </span>
          
-        <strong>
+        <span>
           DUSK
-        </strong>
+        </span>
       </p>
        
       <p
-        class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+        class="dusk-balance__fiat dusk-balance__fiat--visible"
       >
-        <strong>
+        <span>
           $1,758.75
-        </strong>
+        </span>
       </p>
        
       <div
@@ -932,10 +932,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           class="dusk-card__body-container"
         >
           <div
-            class="dusk-balance__account svelte-ila1ms"
+            class="dusk-balance__account"
           >
             <span
-              class="dusk-balance__percentage svelte-ila1ms"
+              class="dusk-balance__percentage"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -954,7 +954,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             </span>
              
             <span
-              class="dusk-balance__value svelte-ila1ms"
+              class="dusk-balance__value"
             >
               2,345.000000000
               <svg
@@ -973,10 +973,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           </div>
            
           <div
-            class="dusk-balance__account svelte-ila1ms"
+            class="dusk-balance__account"
           >
             <span
-              class="dusk-balance__percentage svelte-ila1ms"
+              class="dusk-balance__percentage"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -995,7 +995,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             </span>
              
             <span
-              class="dusk-balance__value svelte-ila1ms"
+              class="dusk-balance__value"
             >
               1,172.500000000
               <svg
@@ -1166,7 +1166,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
       </div>
        
       <article
-        class="dusk-balance svelte-ila1ms"
+        class="dusk-balance"
       >
         <header
           class="dusk-balance__header"
@@ -1181,21 +1181,21 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
         <p
           class="dusk-balance__dusk"
         >
-          <strong>
+          <span>
             3,517.500000000
-          </strong>
+          </span>
            
-          <strong>
+          <span>
             DUSK
-          </strong>
+          </span>
         </p>
          
         <p
-          class="dusk-balance__fiat svelte-ila1ms dusk-balance__fiat--visible"
+          class="dusk-balance__fiat dusk-balance__fiat--visible"
         >
-          <strong>
+          <span>
             $1,758.75
-          </strong>
+          </span>
         </p>
          
         <div
@@ -1206,10 +1206,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             class="dusk-card__body-container"
           >
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -1228,7 +1228,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 2,345.000000000
                 <svg
@@ -1247,10 +1247,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
             </div>
              
             <div
-              class="dusk-balance__account svelte-ila1ms"
+              class="dusk-balance__account"
             >
               <span
-                class="dusk-balance__percentage svelte-ila1ms"
+                class="dusk-balance__percentage"
               >
                 <svg
                   class="dusk-icon dusk-icon--size--default"
@@ -1269,7 +1269,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
               </span>
                
               <span
-                class="dusk-balance__value svelte-ila1ms"
+                class="dusk-balance__value"
               >
                 1,172.500000000
                 <svg
diff --git a/web-wallet/src/style/dusk-components/balance.css b/web-wallet/src/style/dusk-components/balance.css
deleted file mode 100644
index 5e41e1456a..0000000000
--- a/web-wallet/src/style/dusk-components/balance.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.dusk-balance {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  width: 100%;
-}
-
-.dusk-balance__header > h2 {
-  font-size: 1.125em;
-  line-height: 150%;
-  letter-spacing: -0.01125em;
-}
-
-.dusk-balance__dusk {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  justify-content: center;
-}
-
-.dusk-balance__dusk > strong {
-  font-size: 1.75em;
-  font-weight: 500;
-  line-height: 120%;
-  letter-spacing: -0.0175em;
-}
-
-.dusk-balance__fiat > strong {
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.01em;
-  visibility: hidden;
-  color: var(--muted-color);
-}
-
-.dusk-balance__fiat--visible > strong {
-  visibility: unset;
-}
-
-.dusk-balance__usage {
-  padding: 0.62em 0.75em;
-  margin-top: 0.62em;
-}
diff --git a/web-wallet/src/style/main.css b/web-wallet/src/style/main.css
index fab191e8c1..9e2965d7c5 100644
--- a/web-wallet/src/style/main.css
+++ b/web-wallet/src/style/main.css
@@ -3,7 +3,6 @@
 @import url("./dusk-components/agreement.css");
 @import url("./dusk-components/anchor.css");
 @import url("./dusk-components/badge.css");
-@import url("./dusk-components/balance.css");
 @import url("./dusk-components/button.css");
 @import url("./dusk-components/card.css");
 @import url("./dusk-components/checkbox.css");