From 7957ca8f94c5b2cc8810088b5af9cc13c36b6fe5 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Wed, 9 Mar 2022 16:30:45 +0100
Subject: [PATCH] Fix pool detail page on Firefox

---
 .../pool-ranking/pool-ranking.component.ts    |  4 +-
 .../app/components/pool/pool.component.html   | 54 ++++++++++++-------
 .../app/components/pool/pool.component.scss   | 18 ++++++-
 .../src/app/components/pool/pool.component.ts |  1 +
 .../src/app/interfaces/node-api.interface.ts  |  2 +-
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index 01b36ab74..58c383266 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -264,8 +264,8 @@ export class PoolRankingComponent implements OnInit {
             fontSize: 14,
           },
           itemStyle: {
-            borderRadius: 2,
-            borderWidth: 2,
+            borderRadius: 1,
+            borderWidth: 1,
             borderColor: '#000',
           },
           emphasis: {
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index 3c2b78a34..af71351ad 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -2,45 +2,50 @@
 
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
     <h1 class="m-0 mb-2">
-      <img width="50" height="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'"
-        class="mr-3">
+      <img width="50" height="50" src="{{ poolStats['logo'] }}"
+        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
       {{ poolStats.pool.name }}
     </h1>
 
     <div class="box">
       <div class="row">
-        <div class="col-lg-9">
+        <div class="col-lg-7">
           <table class="table table-borderless table-striped" style="table-layout: fixed;">
             <tbody>
               <tr>
-                <td class="col-4 col-lg-3">Addresses</td>
+                <td class="label">Tags</td>
+                <td class="text-truncate">
+                  <div class="scrollable">
+                    {{ poolStats.pool.regexes }}
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label">Addresses</td>
                 <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else noaddress">
                   <div class="scrollable">
                     <a *ngFor="let address of poolStats.pool.addresses"
-                      [routerLink]="['/address' | relativeUrl, address]">{{ address }}<br></a>
+                      [routerLink]="['/address' | relativeUrl, address]">{{
+                      address }}<br></a>
                   </div>
                 </td>
                 <ng-template #noaddress>
                   <td>~</td>
                 </ng-template>
               </tr>
-              <tr>
-                <td class="col-4 col-lg-3">Coinbase Tags</td>
-                <td class="text-truncate">{{ poolStats.pool.regexes }}</td>
-              </tr>
             </tbody>
           </table>
         </div>
-        <div class="col-lg-3">
+        <div class="col-lg-5">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="col-4 col-lg-8">Mined Blocks</td>
-                <td class="text-left">{{ poolStats.blockCount }}</td>
+                <td class="label">Mined Blocks</td>
+                <td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
               </tr>
               <tr>
-                <td class="col-4 col-lg-8">Empty Blocks</td>
-                <td class="text-left">{{ poolStats.emptyBlocks }}</td>
+                <td class="label">Empty Blocks</td>
+                <td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
               </tr>
             </tbody>
           </table>
@@ -54,14 +59,17 @@
     <div class="spinner-border text-light"></div>
   </div>
 
-  <table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
-    [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
+  <table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll
+    [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
+    (scrolled)="loadMore()">
     <thead>
       <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
       <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
       <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
       <th class="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th>
-      <th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px" i18n="latest-blocks.transactions">Transactions</th>
+      <th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px"
+        i18n="latest-blocks.transactions">
+        Transactions</th>
       <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
     </thead>
     <tbody>
@@ -113,7 +121,9 @@
               </tr>
               <tr>
                 <td class="col-4 col-lg-3">Coinbase Tags</td>
-                <td class="text-truncate"><div class="skeleton-loader"></div></td>
+                <td class="text-truncate">
+                  <div class="skeleton-loader"></div>
+                </td>
               </tr>
             </tbody>
           </table>
@@ -123,11 +133,15 @@
             <tbody>
               <tr>
                 <td class="col-4 col-lg-8">Mined Blocks</td>
-                <td class="text-left"><div class="skeleton-loader"></div></td>
+                <td class="text-left">
+                  <div class="skeleton-loader"></div>
+                </td>
               </tr>
               <tr>
                 <td class="col-4 col-lg-8">Empty Blocks</td>
-                <td class="text-left"><div class="skeleton-loader"></div></td>
+                <td class="text-left">
+                  <div class="skeleton-loader"></div>
+                </td>
               </tr>
             </tbody>
           </table>
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 2dfd85881..291177f73 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -36,7 +36,7 @@ div.scrollable {
   margin: 0;
   padding: 0;
   overflow: auto;
-  max-height: 100px;
+  max-height: 75px;
 }
 
 .skeleton-loader {
@@ -47,4 +47,20 @@ div.scrollable {
 .table {
   margin: 0px auto;
   max-width: 900px;
+}
+
+.box {
+  padding-bottom: 0px;
+}
+
+.label {
+  max-width: 50px;
+  width: 30%;
+}
+
+.data {
+  text-align: center;
+  @media (max-width: 767.98px) {
+    text-align: right;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 89d398ca3..da05f0403 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -27,6 +27,7 @@ export class PoolComponent implements OnInit {
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
+  formatNumber = formatNumber;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;
   isLoading = true;
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index a05671257..faa78560a 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -90,7 +90,7 @@ export interface PoolInfo {
 export interface PoolStat {
   pool: PoolInfo;
   blockCount: number;
-  emptyBlocks: BlockExtended[];
+  emptyBlocks: number;
 }
 
 export interface BlockExtension {