From dae4e3ac30bf05364a7d7cd1b59d3d4a5c22e9e2 Mon Sep 17 00:00:00 2001
From: OscarG673 <oguevara1969@gmail.com>
Date: Tue, 24 Feb 2026 23:10:06 -0600
Subject: [PATCH 1/2] ui: mobile view on onbtc wallet page

---
 .../addresses-treemap.component.scss          |  9 ++++-
 .../components/wallet/wallet.component.html   |  4 +-
 .../components/wallet/wallet.component.scss   | 37 +++++++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss
index 78510203f..8f5b607e6 100644
--- a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss
+++ b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss
@@ -1,5 +1,12 @@
-.node-channels-container {
+:host {
+  display: block;
+  width: 100%;
+}
+
+.node-channels-container,
+.addresses-treemap-container {
   position: relative;
+  width: 100%;
 }
 
 .loading-spinner {
diff --git a/frontend/src/app/components/wallet/wallet.component.html b/frontend/src/app/components/wallet/wallet.component.html
index 9aa82b818..d0628f7bd 100644
--- a/frontend/src/app/components/wallet/wallet.component.html
+++ b/frontend/src/app/components/wallet/wallet.component.html
@@ -12,8 +12,8 @@
         <div class="col-md">
           <table class="table table-borderless table-striped address-table">
             <tbody>
-              <tr>
-                <td i18n="address.number-addresses">Addresses</td>
+              <tr class="addresses-row">
+                <td class="addresses-label" i18n="address.number-addresses">Addresses</td>
                 <td *ngIf="addressStrings.length" class="address-list">
                   <app-truncate [text]="addressStrings[0]" [lastChars]="8" [link]="['/address/' | relativeUrl, addressStrings[0]]"></app-truncate>
                   <ng-container *ngIf="addressStrings.length > 1">
diff --git a/frontend/src/app/components/wallet/wallet.component.scss b/frontend/src/app/components/wallet/wallet.component.scss
index 6723cffbc..fdc6382ba 100644
--- a/frontend/src/app/components/wallet/wallet.component.scss
+++ b/frontend/src/app/components/wallet/wallet.component.scss
@@ -8,6 +8,18 @@
 .treemap-col {
   width: 45%;
   height: 300px;
+
+  @media (max-width: 767.98px) {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .treemap-col app-addresses-treemap {
+    display: block;
+    width: 100%;
+  }
 }
 
 .fiat {
@@ -34,6 +46,31 @@
   max-width: 200px;
 }
 
+@media (max-width: 575.98px) {
+  .address-table tr {
+    display: block;
+
+    td {
+      display: block;
+      width: 100%;
+    }
+
+    td:first-child {
+      padding-bottom: 0.25rem;
+      font-weight: 600;
+    }
+
+    td:last-child {
+      padding-top: 0;
+      text-align: left;
+    }
+  }
+
+  .address-table tr.addresses-row .address-list {
+    max-width: none;
+  }
+}
+
 h1 {
   margin: 0px;
   padding: 0px;

From 00816a358ca15c2c2b582bc477684d285672767b Mon Sep 17 00:00:00 2001
From: OscarG673 <oguevara1969@gmail.com>
Date: Fri, 27 Feb 2026 19:53:24 -0600
Subject: [PATCH 2/2] fix treemap tooltip confinement and revert table layout
 changes

---
 .../addresses-treemap.component.ts            |  1 +
 .../components/wallet/wallet.component.html   |  4 +--
 .../components/wallet/wallet.component.scss   | 25 -------------------
 3 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts
index 0ae1c9bcb..2270a781e 100644
--- a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts
+++ b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts
@@ -75,6 +75,7 @@ export class AddressesTreemap implements OnChanges {
           progressive: 100,
           tooltip: {
             show: true,
+            confine: true,
             backgroundColor: 'rgba(17, 19, 31, 1)',
             borderRadius: 4,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
diff --git a/frontend/src/app/components/wallet/wallet.component.html b/frontend/src/app/components/wallet/wallet.component.html
index d0628f7bd..9aa82b818 100644
--- a/frontend/src/app/components/wallet/wallet.component.html
+++ b/frontend/src/app/components/wallet/wallet.component.html
@@ -12,8 +12,8 @@
         <div class="col-md">
           <table class="table table-borderless table-striped address-table">
             <tbody>
-              <tr class="addresses-row">
-                <td class="addresses-label" i18n="address.number-addresses">Addresses</td>
+              <tr>
+                <td i18n="address.number-addresses">Addresses</td>
                 <td *ngIf="addressStrings.length" class="address-list">
                   <app-truncate [text]="addressStrings[0]" [lastChars]="8" [link]="['/address/' | relativeUrl, addressStrings[0]]"></app-truncate>
                   <ng-container *ngIf="addressStrings.length > 1">
diff --git a/frontend/src/app/components/wallet/wallet.component.scss b/frontend/src/app/components/wallet/wallet.component.scss
index fdc6382ba..ccf3c665d 100644
--- a/frontend/src/app/components/wallet/wallet.component.scss
+++ b/frontend/src/app/components/wallet/wallet.component.scss
@@ -46,31 +46,6 @@
   max-width: 200px;
 }
 
-@media (max-width: 575.98px) {
-  .address-table tr {
-    display: block;
-
-    td {
-      display: block;
-      width: 100%;
-    }
-
-    td:first-child {
-      padding-bottom: 0.25rem;
-      font-weight: 600;
-    }
-
-    td:last-child {
-      padding-top: 0;
-      text-align: left;
-    }
-  }
-
-  .address-table tr.addresses-row .address-list {
-    max-width: none;
-  }
-}
-
 h1 {
   margin: 0px;
   padding: 0px;