From ac611a45181ac362e63e8ffd24d5d72c1f46e7d1 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sun, 17 Jul 2022 11:17:48 +0200
Subject: [PATCH] Fix node per as table css

---
 .../nodes-per-isp-chart.component.html        | 26 ++++++-------
 .../nodes-per-isp-chart.component.scss        | 39 +++++++++++++++++++
 2 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
index 24d634a3f..e37efe25b 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -21,28 +21,28 @@
       <div class="spinner-border text-light"></div>
     </div>
 
-    <table class="table table-borderless text-center">
+    <table class="table table-borderless text-center m-auto" style="max-width: 900px">
       <thead>
         <tr>
-          <th *ngIf="!isMobile()" i18n="mining.rank">Rank</th>
-          <th i18n="lightning.isp">ISP</th>
-          <th *ngIf="!isMobile()" i18n="lightning.share">Share</th>
-          <th i18n="lightning.nodes-count">Nodes</th>
-          <th i18n="lightning.capacity">Capacity</th>
+          <th class="rank text-left pl-0" i18n="mining.rank">Rank</th>
+          <th class="name text-left" i18n="lightning.isp">ISP</th>
+          <th class="share text-right" i18n="lightning.share">Share</th>
+          <th class="nodes text-right" i18n="lightning.nodes-count">Nodes</th>
+          <th class="capacity text-right pr-0" i18n="lightning.capacity">Capacity</th>
         </tr>
       </thead>
       <tbody [attr.data-cy]="'pools-table'" *ngIf="(nodesPerAsObservable$ | async) as asList">
         <tr *ngFor="let asEntry of asList">
-          <td *ngIf="!isMobile()">{{ asEntry.rank }}</td>
-          <td class="text-truncate" style="max-width: 100px">
-            <a [routerLink]="[('/lightning/nodes/isp/' + asEntry.ispId) | relativeUrl]">{{ asEntry.name }}</a>
+          <td class="rank text-left pl-0">{{ asEntry.rank }}</td>
+          <td class="name text-left text-truncate"  style="max-width: 100px">
+          <a [routerLink]="[('/lightning/nodes/isp/' + asEntry.ispId) | relativeUrl]">{{ asEntry.name }}</a>
           </td>
-          <td *ngIf="!isMobile()">{{ asEntry.share }}%</td>
-          <td>{{ asEntry.count }}</td>
-          <td><app-amount [satoshis]="asEntry.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
+          <td class="share text-right">{{ asEntry.share }}%</td>
+          <td class="nodes text-right">{{ asEntry.count }}</td>
+          <td class="capacity text-right pr-0"><app-amount [satoshis]="asEntry.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount></td>
         </tr>
       </tbody>
     </table>
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
index 832880122..e2a19e6a0 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -34,3 +34,42 @@
     padding-bottom: 65px
   };
 }
+
+.rank {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.name {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 80%;
+    max-width: 150px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.share {
+  width: 20%;
+  @media (max-width: 576px) {
+    display: none
+  }
+}
+
+.nodes {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 10%;
+  }
+}
+
+.capacity {
+  width: 20%;
+  @media (max-width: 576px) {
+    width: 10%;
+    max-width: 100px;
+  }
+}
\ No newline at end of file