From c5f9682b5b8b5986a2b57a9fbfef35c329d753c8 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 18 Jan 2023 15:48:01 -0600
Subject: [PATCH] fix overflowing tables on ln nodes-per-x chart pages

---
 .../nodes-per-country-chart.component.html        |  2 +-
 .../nodes-per-country-chart.component.scss        | 15 ++++++++++-----
 .../nodes-per-isp-chart.component.html            |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
index 9928d57a8..8279a2d5f 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@@ -21,7 +21,7 @@
       <div class="spinner-border text-light"></div>
     </div>
 
-    <table class="table table-borderless text-center m-auto" style="max-width: 900px">
+    <table class="table table-borderless table-fixed text-center m-auto" style="max-width: 900px">
       <thead>
         <tr>
           <th class="text-left rank" i18n="mining.rank">Rank</th>
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
index 97a3e76f6..70b01d8b3 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
@@ -42,14 +42,14 @@
 }
 
 .rank {
-  width: 20%;
+  width: 8%;
   @media (max-width: 576px) {
     display: none
   }
 }
 
 .name {
-  width: 20%;
+  width: 36%;
   @media (max-width: 576px) {
     width: 80%;
     max-width: 150px;
@@ -59,21 +59,21 @@
 }
 
 .share {
-  width: 20%;
+  width: 15%;
   @media (max-width: 576px) {
     display: none
   }
 }
 
 .nodes {
-  width: 20%;
+  width: 15%;
   @media (max-width: 576px) {
     width: 10%;
   }
 }
 
 .capacity {
-  width: 20%;
+  width: 26%;
   @media (max-width: 576px) {
     width: 10%;
     max-width: 100px;
@@ -91,3 +91,8 @@ a:hover .link {
 .flag {
   font-size: 20px;
 }
+
+.text-truncate .link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
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 60f5ca9d4..c73e936c0 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
@@ -51,7 +51,7 @@
       <app-toggle [textLeft]="'Sort by nodes'" [textRight]="'capacity'" [checked]="true" (toggleStatusChanged)="onGroupToggleStatusChanged($event)"></app-toggle>
     </div>
 
-    <table class="table table-borderless text-center m-auto" style="max-width: 900px"  *ngIf="!widget">
+    <table class="table table-borderless table-fixed text-center m-auto" style="max-width: 900px"  *ngIf="!widget">
       <thead>
         <tr>
           <th class="rank text-left pl-0" i18n="mining.rank">Rank</th>