fix cramped/overflowing node ranking pages

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html

@@ -4,7 +4,7 @@
   </h1>
 
   <div [class]="widget ? 'widget' : 'full'">
-    <table class="table table-borderless">
+    <table class="table table-borderless table-fixed">
       <thead>
         <th class="rank"></th>
         <th class="alias text-left" i18n="nodes.alias">Alias</th>
@@ -29,10 +29,10 @@
             {{ node.channels | number }}
           </td>
           <td *ngIf="!widget" class="timestamp-first text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="timestamp-update text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss

@@ -1,7 +1,7 @@
 .container-xl {
   max-width: 1400px;
   padding-bottom: 100px;
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     padding-left: 50px;
     padding-right: 50px;
   }
@@ -15,40 +15,44 @@
   width: 5%;
 }
 .widget .rank {
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     width: 13%;
   }
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
 .full .alias {
-  width: 10%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
-    max-width: 175px;
+  @media (max-width: 960px) {
+    width: 40%;
+    max-width: 500px;
   }
 }
 .widget .alias {
-  width: 55%;
+  width: 60%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     max-width: 175px;
   }
 }
 
 .full .capacity {
   width: 10%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
 }
 .widget .capacity {
   width: 32%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
@@ -57,28 +61,31 @@
 .full .channels {
   width: 15%;
   padding-right: 50px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-first {
-  width: 15%;
-  @media (max-width: 767.98px) {
+  width: 10%;
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-update {
-  width: 15%;
-  @media (max-width: 767.98px) {
+  width: 10%;
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .location {
-  width: 10%;
-  @media (max-width: 767.98px) {
+  width: 15%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
+  @media (max-width: 600px) {
     display: none;
   }
 }

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html

@@ -29,10 +29,10 @@
             <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
           </td>
           <td *ngIf="!widget" class="timestamp-first text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="timestamp-update text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss

@@ -1,7 +1,7 @@
 .container-xl {
   max-width: 1400px;
   padding-bottom: 100px;
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     padding-left: 50px;
     padding-right: 50px;
   }
@@ -15,70 +15,77 @@
   width: 5%;
 }
 .widget .rank {
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     width: 13%;
   }
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
 .full .alias {
-  width: 10%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
-    max-width: 175px;
+  @media (max-width: 960px) {
+    width: 40%;
+    max-width: 500px;
   }
 }
 .widget .alias {
-  width: 55%;
+  width: 60%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     max-width: 175px;
   }
 }
 
-.full .channels {
+.full .capacity {
   width: 10%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
 }
-.widget .channels {
+.widget .capacity {
   width: 32%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
-.full .capacity {
+.full .channels {
   width: 15%;
   padding-right: 50px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-first {
-  width: 15%;
-  @media (max-width: 767.98px) {
+  width: 10%;
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-update {
-  width: 15%;
-  @media (max-width: 767.98px) {
+  width: 10%;
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .location {
-  width: 10%;
-  @media (max-width: 767.98px) {
+  width: 15%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
+  @media (max-width: 600px) {
     display: none;
   }
 }

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -1,7 +1,7 @@
 <span *ngIf="seconds === undefined">-</span>
 <span *ngIf="seconds !== undefined">
   &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
-  <div class="lg-inline">
+  <div class="lg-inline" *ngIf="!hideTimeSince">
     <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
   </div>
 </span>

frontend/src/app/shared/components/timestamp/timestamp.component.ts

@@ -10,6 +10,7 @@ export class TimestampComponent implements OnChanges {
   @Input() unixTime: number;
   @Input() dateString: string;
   @Input() customFormat: string;
+  @Input() hideTimeSince: boolean = false;
 
   seconds: number | undefined = undefined;