tweak block preview (height & hash side by side)

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

@@ -4,15 +4,19 @@
   </app-preview-title>
   <div class="row">
     <div class="col-sm">
-      <div class="row d-flex justify-content-between">
-        <div class="title-wrapper">
+      <div class="row">
+        <div class="block-titles">
           <h1 class="title">
             <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container></ng-template>
             <ng-template [ngIf]="blockHeight" i18n="shared.block-title">{{ blockHeight }}</ng-template>
           </h1>
+          <h2 class="subtitle" *ngIf="blockHash">
+            {{ blockHash.slice(0,20) }}
+            <br>
+            …{{ blockHash.slice(-19) }}
+          </h2>
         </div>
       </div>
-      <a class="subtitle truncated" [routerLink]="['/block/' | relativeUrl, blockHash]" *ngIf="blockHash"><span class="first">{{blockHash.slice(0,-4)}}</span><span class="last-four">{{blockHash.slice(-4)}}</span></a>
       <table class="table table-borderless table-striped">
         <tbody>
           <!-- <tr>

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

@@ -1,10 +1,34 @@
 .table {
   font-size: 32px;
-  margin-top: 6px;
+  margin-top: 36px;
 }
 
-.title-wrapper {
+.block-titles {
+  margin: 0;
   padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  flex-grow: 1;
+
+  .title {
+    flex-shrink: 0;
+    flex-grow:  0;
+    margin-right: 8px;
+    font-size: 62px;
+  }
+
+  .subtitle {
+    flex-shrink: 1;
+    font-family: Consolas,Liberation Mono,Courier New,monospace;
+    font-size: 31px;
+    overflow: hidden;
+    text-overflow: clip;
+  }
 }
 
 .chart-container {