From 381e8849092172ace11aba26a4f35b027ff58ca5 Mon Sep 17 00:00:00 2001
From: nymkappa <nymkappa@mempool.space>
Date: Wed, 11 Feb 2026 23:46:26 +0100
Subject: [PATCH] [treasuries] make tx list more responsive

---
 ...address-transactions-widget.component.html | 23 ++++++---
 ...address-transactions-widget.component.scss | 51 ++++++++++++-------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
index ea055a96f..d7cb69e4f 100644
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
@@ -1,9 +1,10 @@
 <table class="table latest-transactions">
   <thead>
     <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
-    <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
+    <th class="table-cell-satoshis-desktop" i18n="dashboard.latest-transactions.amount">Amount</th>
     <th class="table-cell-fiat">{{ currency }}</th>
     <th class="table-cell-date" i18n="shared.date">Date</th>
+    <th class="table-cell-satoshis-mobile" i18n="dashboard.latest-transactions.amount">Amount</th>
   </thead>
   <tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
     <tr *ngFor="let transaction of transactions; let i = index;">
@@ -12,9 +13,18 @@
           <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
         </a>
       </td>
-      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount></td>
+      <td class="table-cell-satoshis-desktop">
+        <app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount>
+      </td>
       <td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
-      <td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true" [showTooltip]="true"></app-time></td>
+      <td class="table-cell-date">
+        <a class="mobile-tx-link" [routerLink]="['/tx' | relativeUrl, transaction.txid]">
+          <app-time kind="since" [time]="transaction.time" [fastRender]="true" [showTooltip]="true"></app-time>
+        </a>
+      </td>
+      <td class="table-cell-satoshis-mobile">
+        <app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount>
+      </td>
     </tr>
   </tbody>
   <div class="">&nbsp;</div>
@@ -24,9 +34,10 @@
   <tbody>
     <tr *ngFor="let i of [1,2,3,4,5,6]">
       <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
-      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-satoshis-desktop"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
       <td class="table-cell-fiat"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
-      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-date"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-satoshis-mobile"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
     </tr>
   </tbody>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
index 851da5996..29806ef4c 100644
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
@@ -1,3 +1,9 @@
+@mixin responsive-breakpoint {
+  @media (min-width: 420px) and (max-width: 767px), (min-width: 900px) {
+    @content;
+  }
+}
+
 .latest-transactions {
   width: 100%;
   text-align: left;
@@ -11,34 +17,45 @@
     overflow:hidden;
     width: 25%;
   }
-  .table-cell-satoshis {
+  .table-cell-txid {
     display: none;
+    @include responsive-breakpoint {
+      display: table-cell;
+    }
+  }
+  .table-cell-satoshis-desktop {
+    display: none;
+    @include responsive-breakpoint {
+      display: table-cell;
+      text-align: right;
+    }
+  }
+  .table-cell-satoshis-mobile {
+    display: table-cell;
     text-align: right;
-    @media (min-width: 576px) {
-      display: table-cell;
-    }
-    @media (min-width: 768px) {
+    @include responsive-breakpoint {
       display: none;
     }
-    @media (min-width: 1100px) {
-      display: table-cell;
-    }
   }
   .table-cell-fiat {
     display: none;
     text-align: right;
-    @media (min-width: 485px) {
-      display: table-cell;
-    }
-    @media (min-width: 768px) {
-      display: none;
-    }
-    @media (min-width: 992px) {
+    @media (min-width: 650px) and (max-width: 767px), (min-width: 1100px) {
       display: table-cell;
     }
   }
   .table-cell-date {
-    text-align: right;
+    text-align: left;
+    @include responsive-breakpoint {
+      text-align: right;
+    }
+  }
+  .mobile-tx-link {
+    display: inline;
+    @include responsive-breakpoint {
+      color: inherit;
+      pointer-events: none;
+    }
   }
 }
 .skeleton-loader-transactions {
@@ -47,4 +64,4 @@
   top: 2px;
   margin-bottom: -3px;
   height: 18px;
-}
\ No newline at end of file
+}