Merge pull request #3058 from dusk-network/feature-2994

web-wallet: fix balance overflowing on small screens

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

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;
+}

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>