From 03e4a21bcea3a2ccc09acbbf4ee73d1cad22e646 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 13:01:07 +0100
Subject: [PATCH] Fix styling issue in peg and utxo widgets

---
 .../federation-utxos-list.component.html      |  2 +-
 .../recent-pegs-list.component.html           | 26 +++++++++----------
 .../recent-pegs-list.component.scss           | 18 +++++--------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 7e8ca6e95..1fdf1677e 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -49,7 +49,7 @@
                 </a>
               </ng-container>
               <ng-template #noPeginMessage>
-                <span class="text-muted">-</span>
+                <i><span class="text-muted" i18n="liquid.change-output">Change output</span></i>
               </ng-template>
             </td>
             <td class="timestamp text-right">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index b4ae3b774..d562328a5 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -11,10 +11,10 @@
       <table class="table table-borderless">
         <thead style="vertical-align: middle;">
           <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
+          <th class="timestamp text-left" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
           <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
           <th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th>
           <th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th>
-          <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
         </thead>
         <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
           <ng-container *ngIf="widget; else regularRows">
@@ -31,12 +31,12 @@
                   </a>
                 </ng-container>
               </td>
+              <td class="timestamp text-left widget">
+                <app-time kind="since" [time]="peg.blocktime"></app-time>
+              </td>
               <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
-              <td class="timestamp text-right widget">
-                <app-time kind="since" [time]="peg.blocktime"></app-time>
-              </td>
             </tr>
           </ng-container>
           <ng-template #regularRows>
@@ -53,6 +53,10 @@
                   </a>
                 </ng-container>
               </td>
+              <td class="timestamp text-left">
+                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
+              </td>
               <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
@@ -75,10 +79,6 @@
                   </a>
                 </ng-container>
               </td>
-              <td class="timestamp text-right">
-                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
-                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
-              </td>
             </tr>
           </ng-template>
         </tbody>
@@ -88,10 +88,10 @@
               <td class="transaction text-left widget">
                 <span class="skeleton-loader" style="max-width: 400px"></span>
               </td>
-              <td class="amount text-right widget">
+              <td class="timestamp text-left widget">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
-              <td class="timestamp text-right widget">
+              <td class="amount text-right widget">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
             </tr>
@@ -101,6 +101,9 @@
               <td class="transaction text-left">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
+              <td class="timestamp text-left">
+                <span class="skeleton-loader" style="max-width: 140px"></span>
+              </td>
               <td class="amount text-right">
                 <span class="skeleton-loader" style="max-width: 140px"></span>
               </td>
@@ -110,9 +113,6 @@
               <td class="address text-left">
                 <span class="skeleton-loader" style="max-width: 140px"></span>
               </td>
-              <td class="timestamp text-right">
-                <span class="skeleton-loader" style="max-width: 140px"></span>
-              </td>
             </tr>
           </ng-template>
         </ng-template>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 6efdaaf5c..92f5bc64f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -28,14 +28,14 @@ tr, td, th {
 }
 
 .transaction {
-  width: 25%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 120px;
 }
 .transaction.widget {
-  width: 40%;
+  width: 100%;
   
 }
 
@@ -50,19 +50,16 @@ tr, td, th {
 }
 
 .amount {
-  width: 12%;
-}
-.amount.widget {
-  width: 30%;
+  width: 0%;
 }
 
 .output {
-  width: 25%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 825px) {
+  @media (max-width: 800px) {
     display: none;
   }
 }
@@ -72,13 +69,13 @@ tr, td, th {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 840px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .timestamp {
-  width: 18%;
+  width: 0%;
   @media (max-width: 650px) {
     display: none;
   }
@@ -89,7 +86,6 @@ tr, td, th {
   }
 }
 .timestamp.widget {
-  width: 100%;
   @media (min-width: 768px) AND (max-width: 1050px) {
     display: none;
   }