From c72024b4e38dc3035797dbf3d95365470e38fe70 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sat, 11 Mar 2023 19:31:49 +0900
Subject: [PATCH] Lightning dashboard overflow titles fixes

fixes #3127
---
 .../channels-statistics.component.scss               |  5 ++++-
 .../nodes-per-isp-chart.component.html               | 12 ++++++------
 .../nodes-per-isp-chart.component.scss               |  5 ++++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
index e97f0d0af..30f88f136 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -2,7 +2,10 @@
   color: #4a68b9;
   font-size: 10px;
   margin-bottom: 4px;  
-  font-size: 1rem;
+  font-size: 1rem;      
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .card-text {
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 c73e936c0..a168c032a 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
@@ -3,21 +3,21 @@
   <div *ngIf="widget">
     <div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
       <div class="item">
-        <h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
+        <h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
         <p class="card-text" i18n-ngbTooltip="lightning.clearnet-capacity-desc"
           ngbTooltip="How much liquidity is running on nodes advertising at least one clearnet IP address" placement="bottom">
           <app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
+        <h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
         <p class="card-text" i18n-ngbTooltip="lightning.unknown-capacity-desc"
         ngbTooltip="How much liquidity is running on nodes which ISP was not identifiable" placement="bottom">
           <app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
+        <h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
         <p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
         ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom">
           <app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@@ -80,19 +80,19 @@
 <ng-template #loadingReward>
   <div class="pool-distribution">
     <div class="item">
-      <h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
+      <h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>
     </div>
     <div class="item">
-      <h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
+      <h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>
     </div>
     <div class="item">
-      <h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
+      <h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>
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 e36747e08..08fb359a6 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
@@ -68,10 +68,13 @@
     margin-bottom: 5px;
   }
   .item {
-    max-width: 160px;
+    max-width: 150px;
     width: 50%;
     display: inline-block;
     margin: 0px auto 20px;
+    @media (min-width: 485px) {
+      max-width: 160px;
+    }
     &:nth-child(2) {
       order: 2;
       @media (min-width: 485px) {