From e8151e8393de6dd9f6349eb7162893630b5bf55b Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Wed, 31 Aug 2022 08:17:42 +0200
Subject: [PATCH] Fix node header layout

---
 .../app/lightning/node/node.component.html    | 22 +++++++++----------
 .../app/lightning/node/node.component.scss    |  7 ++++++
 .../geolocation/geolocation.component.html    |  2 +-
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index a279d0fd7..778543772 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -22,30 +22,30 @@
 
     <div class="row">
       <div class="col-md">
-        <table class="table table-borderless table-striped">
+        <table class="table table-borderless table-striped table-fixed">
           <tbody>
             <tr>
-              <td i18n="lightning.active-capacity">Active capacity</td>
+              <td i18n="lightning.active-capacity" class="text-truncate label">Active capacity</td>
               <td>
                 <app-sats [satoshis]="node.capacity"></app-sats>
                 <app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat>
               </td>
             </tr>
             <tr>
-              <td i18n="lightning.active-channels">Active channels</td>
+              <td i18n="lightning.active-channels" class="text-truncate label">Active channels</td>
               <td>
                 {{ node.active_channel_count }}
               </td>
             </tr>
             <tr>
-              <td i18n="lightning.active-channels-avg">Average channel size</td>
+              <td i18n="lightning.active-channels-avg" class="text-wrap label">Average channel size</td>
               <td>
                 <app-sats [satoshis]="node.avgCapacity"></app-sats>
                 <app-fiat [value]="node.avgCapacity" digitsInfo="1.0-0"></app-fiat>
               </td>
             </tr>
             <tr *ngIf="node.geolocation">
-              <td i18n="location">Location</td>
+              <td i18n="location" class="text-truncate">Location</td>
               <td>
                 <app-geolocation [data]="node.geolocation" [type]="'node'"></app-geolocation>
               </td>
@@ -55,30 +55,30 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col-md">
-        <table class="table table-borderless table-striped">
+        <table class="table table-borderless table-striped table-fixed">
           <tbody>
             <tr>
-              <td i18n="address.total-received">First seen</td>
+              <td i18n="address.total-received" class="text-truncate label">First seen</td>
               <td>
                 <app-timestamp [unixTime]="node.first_seen"></app-timestamp>
               </td>
             </tr>
             <tr>
-              <td i18n="address.total-sent">Last update</td>
+              <td i18n="address.total-sent" class="text-truncate label">Last update</td>
               <td>
                 <app-timestamp [unixTime]="node.updated_at"></app-timestamp>
               </td>
             </tr>
             <tr>
-              <td i18n="address.balance">Color</td>
+              <td i18n="address.balance" class="text-truncate label">Color</td>
               <td>
                 <div [ngStyle]="{'color': node.color}">{{ node.color }}</div>
               </td>
             </tr>
             <tr *ngIf="node.country">
-              <td i18n="isp">ISP</td>
+              <td i18n="isp" class="text-truncate label">ISP</td>
               <td>
-                <a [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]">
+                <a class="d-block text-wrap" [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]">
                   {{ node.as_organization }} [ASN {{node.as_number}}]
                 </a>                
               </td>
diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
index 481f2a8c4..7221e56bc 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -77,3 +77,10 @@ app-fiat {
   left: calc(50% - 15px);
   z-index: 100;
 }
+
+.label {
+  width: 50%;
+  @media (min-width: 576px) {
+    width: 40%;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/geolocation/geolocation.component.html b/frontend/src/app/shared/components/geolocation/geolocation.component.html
index 2788cd4c1..c63af47be 100644
--- a/frontend/src/app/shared/components/geolocation/geolocation.component.html
+++ b/frontend/src/app/shared/components/geolocation/geolocation.component.html
@@ -1 +1 @@
-<span [innerHTML]="formattedLocation"></span>
\ No newline at end of file
+<span class="d-block text-truncate" [innerHTML]="formattedLocation"></span>
\ No newline at end of file