From 3cca6f6b8bb867faaec12e819652029751bedb4e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 2 Apr 2023 06:54:42 +0900
Subject: [PATCH] Pixel-aligned grids for sharper block visualizations

---
 .../block-overview-graph.component.html       | 28 ++++++++++---------
 .../block-overview-graph.component.scss       |  8 ++++++
 .../block/block-preview.component.html        |  2 +-
 .../block/block-preview.component.scss        |  4 +--
 .../app/components/block/block.component.html |  6 ++--
 .../mempool-block-overview.component.html     |  2 +-
 6 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
index 2a357843b..a625a0385 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
@@ -1,15 +1,17 @@
-<div class="block-overview-graph">
-  <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
-  <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
-    <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
-    <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
-  </div>
 
-  <app-block-overview-tooltip
-    [tx]="selectedTx || hoverTx"
-    [cursorPosition]="tooltipPosition"
-    [clickable]="!!selectedTx"
-    [auditEnabled]="auditHighlighting"
-    [blockConversion]="blockConversion"
-  ></app-block-overview-tooltip>
+<div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
+  <div class="block-overview-graph">
+    <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
+    <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
+      <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
+      <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
+    </div>
+    <app-block-overview-tooltip
+      [tx]="selectedTx || hoverTx"
+      [cursorPosition]="tooltipPosition"
+      [clickable]="!!selectedTx"
+      [auditEnabled]="auditHighlighting"
+      [blockConversion]="blockConversion"
+    ></app-block-overview-tooltip>
+  </div>
 </div>
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
index 58b53aebf..d30dd3305 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
@@ -6,8 +6,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  grid-column: 1/-1;
 }
 
+.grid-align {
+  position: relative;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 75px);
+  justify-content: center;
+}
 
 .block-overview-canvas {
   position: absolute;
diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index 83962857c..0c33246a7 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -71,7 +71,7 @@
       <app-block-overview-graph
         #blockGraph
         [isLoading]="false"
-        [resolution]="75"
+        [resolution]="80"
         [blockLimit]="stateService.blockVSize"
         [orientation]="'top'"
         [flip]="false"
diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss
index 0f21a3466..4469f7f60 100644
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/frontend/src/app/components/block/block-preview.component.scss
@@ -52,8 +52,8 @@
 .chart-container {
   flex-grow: 0;
   flex-shrink: 0;
-  width: 470px;
-  min-width: 470px;
+  width: 480px;
+  min-width: 480px;
   padding: 0;
   margin-right: 15px;
 }
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index dba55ec37..84fdfcd91 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -110,7 +110,7 @@
           <app-block-overview-graph
             #blockGraphActual
             [isLoading]="isLoadingOverview"
-            [resolution]="75"
+            [resolution]="80"
             [blockLimit]="stateService.blockVSize"
             [orientation]="'top'"
             [flip]="false"
@@ -227,7 +227,7 @@
       <div class="col-sm">
         <h3 class="block-subtitle" *ngIf="!isMobile"><ng-container i18n="block.expected-block">Expected Block</ng-container> <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span></h3>
         <div class="block-graph-wrapper">
-          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
+          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="80"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
@@ -239,7 +239,7 @@
       <div class="col-sm" *ngIf="!isMobile">
         <h3 class="block-subtitle actual" *ngIf="!isMobile"><ng-container i18n="block.actual-block">Actual Block</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="how-do-block-audits-work"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></h3>
         <div class="block-graph-wrapper">
-          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
+          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="80"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"  [auditHighlighting]="showAudit"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
index 37c82afad..7d5ddec30 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,7 +1,7 @@
 <app-block-overview-graph
   #blockGraph
   [isLoading]="isLoading$ | async"
-  [resolution]="75"
+  [resolution]="80"
   [blockLimit]="stateService.blockVSize"
   [orientation]="timeLtr ? 'right' : 'left'"
   [flip]="true"