From fb621f98123778923a4787c2e213b3f55fcf23c4 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 14 Jun 2024 15:51:00 +0000
Subject: [PATCH] Address redesign liquid & layout fixes

---
 .../components/address/address.component.html | 20 +++++++++++++------
 .../components/address/address.component.scss |  4 ++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index de10948f7..3d6f1b86d 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -28,23 +28,31 @@
                 <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
                 <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
                 <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
-                <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                @if (network === 'liquid' || network === 'liquidtestnet') {
+                  <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
+                } @else {
+                  <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                }
                 <ng-container *ngTemplateOutlet="typeRow"></ng-container>
               </tbody>
             </table>
           </div>
         } @else {
           <div class="col-sm">
-            <table class="table table-borderless table-striped">
+            <table class="table table-borderless table-striped table-fixed">
               <tbody>
                 <ng-container *ngTemplateOutlet="balanceRow"></ng-container>
                 <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
-                <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                @if (network === 'liquid' || network === 'liquidtestnet') {
+                  <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
+                } @else {
+                  <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                }
               </tbody>
             </table>
           </div>
           <div class="col-sm">
-            <table class="table table-borderless table-striped">
+            <table class="table table-borderless table-striped table-fixed">
               <tbody>
                 <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
                 <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
@@ -227,7 +235,7 @@
 <ng-template #typeRow>
   <tr>
     <td i18n="address.type">Type</td>
-    <td><app-address-type [address]="addressTypeInfo"></app-address-type><app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels></td>
+    <td class="wrap-cell"><app-address-type [address]="addressTypeInfo"></app-address-type><app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels></td>
   </tr>
 </ng-template>
 
@@ -235,7 +243,7 @@
   <tr *ngIf="addressInfo && addressInfo.unconfidential">
     <td i18n="address.unconfidential">Unconfidential</td>
     <td>
-      <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+      <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [textAlign]="isMobile ? 'end' : 'start'" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
         <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
       </app-truncate>
     </td>
diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss
index b4ab5ac8a..c7d37425e 100644
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@@ -27,6 +27,10 @@
         text-align: left;
       }
     }
+
+    &.wrap-cell {
+      white-space: normal;
+    }
   }
 }