Merge pull request #3693 from mempool/mononaut/preview-table-overflows

prevent table overflow in unfurl previews

frontend/src/app/components/address/address-preview.component.html

@@ -3,7 +3,7 @@
     <span i18n="shared.address">Address</span>
   </app-preview-title>
   <div class="row">
-    <div class="col-md">
+    <div class="col-md table-col">
       <div class="row d-flex justify-content-between">
         <div class="title-wrapper">
           <h1 class="title"><app-truncate [text]="addressString"></app-truncate></h1>

frontend/src/app/components/address/address-preview.component.scss

@@ -20,6 +20,11 @@
   margin-right: 15px;
 }
 
+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .table {
   font-size: 32px;
   margin-top: 48px;

frontend/src/app/components/block/block-preview.component.html

@@ -3,7 +3,7 @@
     <span i18n="shared.block-title">Block</span>
   </app-preview-title>
   <div class="row">
-    <div class="col-sm">
+    <div class="col-sm table-col">
       <div class="row">
         <div class="block-titles">
           <h1 class="title">

frontend/src/app/components/block/block-preview.component.scss

@@ -44,6 +44,11 @@
   }
 }
 
+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .chart-container {
   flex-grow: 0;
   flex-shrink: 0;

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

@@ -15,7 +15,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-md">
+    <div class="col-md table-col">
       <a class="subtitle" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
       <table class="table table-borderless table-striped">
         <tbody>

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

@@ -1,3 +1,8 @@
+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .table {
   font-size: 32px;
   margin-top: 10px;

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

@@ -1,3 +1,8 @@
+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .table {
   margin-top: 6px;
   font-size: 32px;
@@ -18,10 +23,6 @@
   }
 }
 
-.table-col {
-  max-width: calc(100% - 470px);
-}
-
 .map-col {
   flex-grow: 0;
   flex-shrink: 0;