From 82e115c00994674323e3c32eae0995277fadd51e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 27 Mar 2024 02:46:29 +0000
Subject: [PATCH] Standardize the block visualization grid

---
 .../block-overview-graph/block-overview-graph.component.html | 2 +-
 .../block-overview-graph/block-overview-graph.component.scss | 5 ++++-
 .../block-overview-graph/block-overview-graph.component.ts   | 1 +
 .../src/app/components/block/block-preview.component.html    | 3 ++-
 4 files changed, 8 insertions(+), 3 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 bc5b3744d..702718742 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,5 +1,5 @@
 
-<div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
+<div class="graph-alignment" [class.grid-align]="!autofit" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
   <div class="block-overview-graph">
     <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
     <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
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 deb0a6f55..c468cf792 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
@@ -22,9 +22,12 @@
   }
 }
 
-.grid-align {
+.graph-alignment {
   position: relative;
   width: 100%;
+}
+
+.grid-align {
   display: grid;
   grid-template-columns: repeat(auto-fit, 75px);
   justify-content: center;
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index ab6985a25..61c2108f2 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -32,6 +32,7 @@ const unmatchedAuditColors = {
 export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, OnChanges {
   @Input() isLoading: boolean;
   @Input() resolution: number;
+  @Input() autofit: boolean = false;
   @Input() blockLimit: number;
   @Input() orientation = 'left';
   @Input() flip = true;
diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index 0c33246a7..02fe62774 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -70,8 +70,9 @@
     <div class="col-sm chart-container">
       <app-block-overview-graph
         #blockGraph
+        [autofit]="true"
         [isLoading]="false"
-        [resolution]="80"
+        [resolution]="86"
         [blockLimit]="stateService.blockVSize"
         [orientation]="'top'"
         [flip]="false"