Merge pull request #1902 from dusk-network/feature-1901

web-wallet: Fix Receive tab content overflows

web-wallet/CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Update Buttons to match the design system [#1606]
 
+### Fixed
+
+- Fix Receive tab content overflows [#1901]
+
 ## [0.5.0] - 2024-03-27
 
 ### Added
@@ -216,6 +220,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1591]: https://github.com/dusk-network/rusk/issues/1591
 [#1598]: https://github.com/dusk-network/rusk/issues/1598
 [#1606]: https://github.com/dusk-network/rusk/issues/1606
+[#1901]: https://github.com/dusk-network/rusk/issues/1901
 
 <!-- VERSIONS -->
 

web-wallet/src/lib/components/Receive/Receive.svelte

@@ -14,7 +14,6 @@
   export let hideBackButton = false;
 
   let offsetHeight = 0;
-  let receiveAddressHeight = 0;
   let buttonHeight = 0;
 
   const COLUMN_COUNT = 2;
@@ -24,21 +23,14 @@
   const dispatch = createEventDispatcher();
 
   $: qrWidth =
-    offsetHeight -
-    receiveAddressHeight -
-    buttonHeight -
-    COLUMN_COUNT * COLUMN_WIDTH -
-    BOTTOM_PADDING;
+    offsetHeight - buttonHeight - COLUMN_COUNT * COLUMN_WIDTH - BOTTOM_PADDING;
 </script>
 
 <div class="receive" bind:offsetHeight>
   <figure class="receive__address-qr-figure">
     <QrCode value={address} className="receive__qr" width={qrWidth} />
 
-    <figcaption
-      class="receive__address"
-      bind:offsetHeight={receiveAddressHeight}
-    >
+    <figcaption class="receive__address">
       <samp>{address}</samp>
     </figcaption>
   </figure>
@@ -80,6 +72,7 @@
     left: 0;
     z-index: 3;
     height: 100%;
+    overflow: auto;
 
     &__address-qr-figure {
       display: flex;