From 42bd08c744b8b4f9db32818ac66278c0559d2444 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 9 Feb 2024 14:26:34 +0100
Subject: [PATCH] Minor fixes on Liquid dashboards

---
 .../liquid-master-page.component.html         |   2 +-
 .../liquid-master-page.component.scss         |  15 +
 .../federation-addresses-list.component.scss  |  13 +-
 .../federation-addresses-stats.component.scss |   1 +
 .../recent-pegs-list.component.html           | 258 +++++++++---------
 .../recent-pegs-list.component.scss           |  15 +-
 .../recent-pegs-stats.component.scss          |   1 +
 .../reserves-audit-dashboard.component.html   |   6 +-
 .../reserves-audit-dashboard.component.scss   |  17 +-
 .../reserves-audit-dashboard.component.ts     |  14 +-
 .../reserves-ratio-graph.component.ts         |   2 +-
 .../reserves-ratio.component.ts               |   4 +-
 .../reserves-supply-stats.component.html      |   2 +-
 .../app/dashboard/dashboard.component.html    |   6 +-
 .../app/dashboard/dashboard.component.scss    |   4 +
 15 files changed, 197 insertions(+), 163 deletions(-)

diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 760cadda4..1db3c1924 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -81,7 +81,7 @@
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-audit">
         <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.btc-reserves-audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
-      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
+      <li class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-about">
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
index ca3a7812c..a6766232c 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -23,6 +23,21 @@ li.nav-item {
   margin: auto 10px;
   padding-left: 10px;
   padding-right: 10px;
+  @media (max-width: 992px) {
+    margin: auto 7px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  @media (max-width: 429px) {
+    margin: auto 5px;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  @media (max-width: 369px) {
+    margin: auto 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
 }
 
 @media (min-width: 992px) {
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
index fb0232064..ebe52e6d1 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@@ -6,11 +6,14 @@
 
 tr, td, th {
   border: 0px;
-  padding-top: 0.65rem !important;
-  padding-bottom: 0.6rem !important;
-  padding-right: 2rem !important;
-  .widget {
-    padding-right: 1rem !important;
+  padding-top: 0.65rem;
+  padding-bottom: 0.6rem;
+  padding-right: 2rem;
+  .widget &.widget {
+    padding-right: 1rem;
+    @media (max-width: 510px) {
+      padding-right: 0.5rem;
+    }
   }
 }
 
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
index f7c2f104c..b516f12f1 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
@@ -1,6 +1,7 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
   @media (min-width: 376px) {
     flex-direction: row;
   }  
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 b0683389e..e5547fd3f 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
@@ -1,135 +1,133 @@
-<div class="container-xl">
-  <div [ngClass]="{'widget': widget}">
+<div [ngClass]="{'container-xl': !widget, 'widget': widget}">
 
-    <div *ngIf="!widget">
-      <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
-    </div>
-
-    <div class="clearfix"></div>
-    
-    <div style="min-height: 295px">
-      <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>
-        </thead>
-        <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
-          <ng-container *ngIf="widget; else regularRows">
-            <tr *ngFor="let peg of pegs | slice:0:5">
-              <td class="transaction text-left widget">
-                <ng-container *ngIf="peg.amount > 0">
-                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
-                    <app-truncate [text]="peg.txid"></app-truncate>
-                  </a>
-                </ng-container>
-                <ng-container *ngIf="peg.amount < 0">
-                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
-                    <app-truncate [text]="peg.txid"></app-truncate>
-                  </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, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
-                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
-              </td>
-            </tr>
-          </ng-container>
-          <ng-template #regularRows>
-            <tr *ngFor="let peg of pegs | slice:(page - 1) * pageSize:page * pageSize">
-              <td class="transaction text-left">
-                <ng-container *ngIf="peg.amount > 0">
-                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
-                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
-                  </a>
-                </ng-container>
-                <ng-container *ngIf="peg.amount < 0">
-                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
-                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
-                  </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, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
-                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
-              </td>
-              <td class="output text-left">
-                <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
-                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
-                    <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
-                  </a>
-                </ng-container>
-                <ng-template #redeemInProgress>
-                  <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
-                    <i><span class="text-muted" i18n="liquid.redemption-in-progress">Peg out in progress...</span></i>
-                  </ng-container>
-                </ng-template>
-              </td>
-              <td class="address text-left">
-                <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
-                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12">
-                    <app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate>
-                  </a>
-                </ng-container>
-              </td>
-            </tr>
-          </ng-template>
-        </tbody>
-        <ng-template #skeleton>
-          <tbody *ngIf="widget; else regularRowsSkeleton">
-            <tr *ngFor="let item of skeletonLines">
-              <td class="transaction text-left widget">
-                <span class="skeleton-loader" style="max-width: 400px"></span>
-              </td>
-              <td class="timestamp text-left widget">
-                <span class="skeleton-loader" style="max-width: 300px"></span>
-              </td>
-              <td class="amount text-right widget">
-                <span class="skeleton-loader" style="max-width: 300px"></span>
-              </td>
-            </tr>
-          </tbody>
-          <ng-template #regularRowsSkeleton>
-            <tr *ngFor="let item of skeletonLines">
-              <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>
-              <td class="output text-left">
-                <span class="skeleton-loader" style="max-width: 300px"></span>
-              </td>
-              <td class="address text-left">
-                <span class="skeleton-loader" style="max-width: 140px"></span>
-              </td>
-            </tr>
-          </ng-template>
-        </ng-template>
-      </table>
-
-      <ngb-pagination *ngIf="!widget && recentPegs$ | async as pegs" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
-        [collectionSize]="pegs.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
-        (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
-      </ngb-pagination>
-
-      <ng-template [ngIf]="!widget">
-        <div class="clearfix"></div>
-        <br>
-      </ng-template>
-    </div>
-    
+  <div *ngIf="!widget">
+    <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
   </div>
+
+  <div class="clearfix"></div>
+  
+  <div style="min-height: 295px">
+    <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>
+      </thead>
+      <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+        <ng-container *ngIf="widget; else regularRows">
+          <tr *ngFor="let peg of pegs | slice:0:5">
+            <td class="transaction text-left widget">
+              <ng-container *ngIf="peg.amount > 0">
+                <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
+                  <app-truncate [text]="peg.txid"></app-truncate>
+                </a>
+              </ng-container>
+              <ng-container *ngIf="peg.amount < 0">
+                <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
+                  <app-truncate [text]="peg.txid"></app-truncate>
+                </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, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
+              <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
+            </td>
+          </tr>
+        </ng-container>
+        <ng-template #regularRows>
+          <tr *ngFor="let peg of pegs | slice:(page - 1) * pageSize:page * pageSize">
+            <td class="transaction text-left">
+              <ng-container *ngIf="peg.amount > 0">
+                <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
+                  <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                </a>
+              </ng-container>
+              <ng-container *ngIf="peg.amount < 0">
+                <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
+                  <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                </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, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
+              <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
+            </td>
+            <td class="output text-left">
+              <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
+                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
+                  <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
+                </a>
+              </ng-container>
+              <ng-template #redeemInProgress>
+                <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
+                  <i><span class="text-muted" i18n="liquid.redemption-in-progress">Peg out in progress...</span></i>
+                </ng-container>
+              </ng-template>
+            </td>
+            <td class="address text-left">
+              <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
+                <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                  <app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate>
+                </a>
+              </ng-container>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody *ngIf="widget; else regularRowsSkeleton">
+          <tr *ngFor="let item of skeletonLines">
+            <td class="transaction text-left widget">
+              <span class="skeleton-loader" style="max-width: 400px"></span>
+            </td>
+            <td class="timestamp text-left widget">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="amount text-right widget">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+          </tr>
+        </tbody>
+        <ng-template #regularRowsSkeleton>
+          <tr *ngFor="let item of skeletonLines">
+            <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: 240px"></span>
+            </td>
+            <td class="amount text-right">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
+            </td>
+            <td class="output text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="address text-left">
+              <span class="skeleton-loader" style="max-width: 240px"></span>
+            </td>
+          </tr>
+        </ng-template>
+      </ng-template>
+    </table>
+
+    <ngb-pagination *ngIf="!widget && recentPegs$ | async as pegs" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+      [collectionSize]="pegs.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
+      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
+    </ngb-pagination>
+
+    <ng-template [ngIf]="!widget">
+      <div class="clearfix"></div>
+      <br>
+    </ng-template>
+  </div>
+  
 </div>
 
 <br>
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 4bb89d781..e754234c3 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
@@ -6,11 +6,14 @@
 
 tr, td, th {
   border: 0px;
-  padding-top: 0.65rem !important;
-  padding-bottom: 0.6rem !important;
-  padding-right: 2rem !important;
-  .widget {
-    padding-right: 1rem !important;
+  padding-top: 0.65rem;
+  padding-bottom: 0.6rem;
+  padding-right: 2rem;
+  .widget &.widget {
+    padding-right: 1rem;
+    @media (max-width: 510px) {
+      padding-right: 0.5rem;
+    }
   }
 }
 
@@ -93,7 +96,7 @@ tr, td, th {
     display: block;
   }
 
-  @media (max-width: 500px) {
+  @media (max-width: 510px) {
     display: none;
   }
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
index 658094609..4cfef8e7a 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
@@ -1,6 +1,7 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
   @media (min-width: 376px) {
     flex-direction: row;
   }  
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index 47d6e7aed..2c8c76291 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -17,13 +17,13 @@
           <app-reserves-ratio-stats [fullHistory$]="fullHistory$"></app-reserves-ratio-stats>
         </div>
         <div class="card-body pl-0" style="padding-top: 10px;">
-          <app-reserves-ratio-graph [data]="fullHistory$ | async"></app-reserves-ratio-graph>
+          <app-reserves-ratio-graph [data]="fullHistory$ | async" [height]="pegRatioGraphHeight"></app-reserves-ratio-graph>
         </div>
       </div>
     </div>
 
     <div class="col">
-      <div class="card">
+      <div class="card smaller">
         <div class="card-body">
           <app-recent-pegs-stats [pegsVolume$]="pegsVolume$"></app-recent-pegs-stats>
           <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [recentPegOuts$]="recentPegOuts$"[widget]="true"></app-recent-pegs-list>
@@ -32,7 +32,7 @@
     </div>
 
     <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card">
+      <div class="card smaller">
         <div class="card-body">
           <app-federation-addresses-stats [federationAddresses$]="federationAddresses$" [federationAddressesOneMonthAgo$]="federationAddressesOneMonthAgo$"></app-federation-addresses-stats>
           <app-federation-addresses-list [federationAddresses$]="federationAddresses$" [widget]="true"></app-federation-addresses-list>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
index 1116f8d85..7b2aea1fa 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
@@ -8,6 +8,13 @@
 
 .card {
   background-color: #1d1f31;
+  height: 418px;
+  @media (min-width: 992px) {
+    height: 512px;
+  }
+  &.smaller {
+    height: 408px;
+  }
 }
 
 .card-title {
@@ -121,16 +128,6 @@
   }
 }
 
-.card {
-  height: 385px;
-}
-.list-card {
-  height: 410px;
-  @media (max-width: 767px) {
-    height: auto;
-  }
-}
-
 .mempool-block-wrapper {
   max-height: 380px;
   max-width: 380px;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 2133f0fe2..46379f962 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
@@ -25,6 +25,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
   liquidReservesMonth$: Observable<any>;
+  pegRatioGraphHeight: number = 320;
   fullHistory$: Observable<any>;
   isLoad: boolean = true;
   private lastPegBlockUpdate: number = 0;
@@ -209,4 +210,15 @@ export class ReservesAuditDashboardComponent implements OnInit {
     this.destroy$.complete();
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.pegRatioGraphHeight = 320;
+    } else if (window.innerWidth >= 768) {
+      this.pegRatioGraphHeight = 230;
+    } else {
+      this.pegRatioGraphHeight = 220;
+    }
+  }
+
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts
index 187a059a1..9b48466e3 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts
@@ -10,10 +10,10 @@ import { EChartsOption } from '../../../graphs/echarts';
 })
 export class ReservesRatioGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
+  @Input() height: number | string = '320';
   ratioHistoryChartOptions: EChartsOption;
   ratioSeries: number[] = [];
 
-  height: number | string = '200';
   right: number | string = '10';
   top: number | string = '20';
   left: number | string = '50';
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
index b53172e97..efe3df2e1 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@@ -108,14 +108,14 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
             fontFamily: 'inherit',
             fontWeight: 500,
             formatter: function (value) {
-              return (value).toFixed(5);
+              return (value * 100).toFixed(3) + ' %';
             },
             color: 'inherit'
           },
           data: [
             {
               value: parseFloat(currentReserves.amount) / parseFloat(currentPeg.amount),
-              name: 'Peg-O-Meter'
+              name: 'Assets vs Liabilities'
             }
           ]
         }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index 2856cc210..5352f67e8 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves</h5>
+        <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
         <div class="card-text">
           <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
           <span class="fiat">
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index a2c46a198..29feba485 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -284,11 +284,11 @@
 </ng-template>
 
 <ng-template #lbtcPegs let-mempoolInfoData>
-  <div class="mempool-info-data">
+  <div class="mempool-info-data lbtc-pegs-stats">
     <div class="item">
       <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
       <ng-container *ngIf="(currentPeg$ | async) as currentPeg; else loadingTransactions">
-        <p i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></p>
+        <div i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></div>
       </ng-container>
     </div>
     <div class="item">
@@ -296,7 +296,7 @@
         <h5 class="card-title"><ng-container i18n="dashboard.btc-reserves">BTC Reserves</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
-        <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>
+        <div i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></div>
       </ng-container>
     </div>
   </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 70972ae8e..fd20b629e 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -59,6 +59,10 @@
     display: flex;
     flex-direction: row;
   }
+  &.lbtc-pegs-stats { 
+    display: flex;
+    flex-direction: row;
+  }
   h5 {
     margin-bottom: 10px;
   }