Restyle ln preview titles to match main pages

frontend/src/app/lightning/channel/channel-preview.component.html

@@ -1,9 +1,9 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">
-      <span i18n="lightning.channel">Channel</span>: 
-      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]"> {{ channel.short_id }}</a>
-    </h1>
+    <div class="title-container mb-0" *ngIf="!error">
+      <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+      <h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
       <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>

frontend/src/app/lightning/channel/channel-preview.component.scss

@@ -1,11 +1,24 @@
-.title {
-  font-size: 52px;
-  margin: 0;
+.title-container {
+  width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+
+  h5 {
+    font-size: 28px;
+    margin-top: -4px;
+  }
+
+  h1 {
+    font-size: 52px;
+    margin-bottom: 0;
+    margin-top: -8px;
+  }
 }
 
 .table {
+  margin-top: 14px;
   font-size: 32px;
-  margin-top: 36px;
 }
 
 .badges {
@@ -23,6 +36,7 @@
 .full-width-row {
   padding-left: 15px;
   padding-right: 15px;
+  flex-wrap: nowrap;
 
   &:nth-child(even) {
     background: #181b2d;
@@ -33,6 +47,7 @@
 .nodes {
   font-size: 36px;
   align-items: center;
+  margin-top: 0px;
 }
 
 .between-arrow {