From 0ac33528352cf1936bf2e997a2d20889841873c5 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 10 Sep 2022 15:57:06 +0000
Subject: [PATCH 1/2] tweak block preview (height & hash side by side)

---
 .../block/block-preview.component.html        | 10 +++++--
 .../block/block-preview.component.scss        | 28 +++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index 666714b24..4e75abdc1 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/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>
diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss
index 2d8d5f6ba..21d169238 100644
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/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 {

From a74811cb7e423320ad57efbc61b370e080b88bb7 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 11 Sep 2022 01:17:46 +0000
Subject: [PATCH 2/2] improve preview block hash truncation

---
 .../block/block-preview.component.html        |  9 +++----
 .../block/block-preview.component.scss        | 25 ++++++++++++++-----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index 4e75abdc1..2535486de 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -10,11 +10,10 @@
             <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 class="blockhash" *ngIf="blockHash">
+            <h2 class="truncate right">{{ blockHash.slice(0,32) }}</h2>
+            <h2 class="truncate left">{{ blockHash.slice(32) }}</h2>
+          </div>
         </div>
       </div>
       <table class="table table-borderless table-striped">
diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss
index 21d169238..45e9f9292 100644
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/frontend/src/app/components/block/block-preview.component.scss
@@ -18,16 +18,29 @@
   .title {
     flex-shrink: 0;
     flex-grow:  0;
-    margin-right: 8px;
-    font-size: 62px;
+    margin-right: 30px;
+    font-size: 64px;
   }
 
-  .subtitle {
+  .blockhash {
+    width: 0;
+    flex-grow: 1;
     flex-shrink: 1;
     font-family: Consolas,Liberation Mono,Courier New,monospace;
-    font-size: 31px;
-    overflow: hidden;
-    text-overflow: clip;
+    font-size: 32px;
+    text-align: right;
+
+    .truncate {
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0;
+
+      &.left {
+        direction: rtl;
+      }
+    }
   }
 }