Merge pull request #4826 from mempool/mononaut/standardized-grid

Standardize the block visualization grid

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">

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;

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;

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"