clock size query params

frontend/src/app/components/clock/clock.component.ts

@@ -25,6 +25,8 @@ export class ClockComponent implements OnInit {
   blockStyle;
   blockSizerStyle;
   wrapperStyle;
+  limitWidth: number;
+  limitHeight: number;
 
   gradientColors = {
     '': ['#9339f4', '#105fb0'],
@@ -40,16 +42,18 @@ export class ClockComponent implements OnInit {
     private websocketService: WebsocketService,
     private route: ActivatedRoute,
     private cd: ChangeDetectorRef,
-  ) {}
+  ) {
+    this.route.queryParams.subscribe((params) => {
+      this.hideStats = params && params.stats === 'false';
+      this.limitWidth = Number.parseInt(params.width) || null;
+      this.limitHeight = Number.parseInt(params.height) || null;
+    });
+  }
 
   ngOnInit(): void {
     this.resizeCanvas();
     this.websocketService.want(['blocks']);
 
-    this.route.queryParams.subscribe((params) => {
-      this.hideStats = params && params.stats === 'false';
-    });
-
     this.blocksSubscription = this.stateService.blocks$
       .subscribe(([block]) => {
         if (block) {
@@ -78,9 +82,11 @@ export class ClockComponent implements OnInit {
   
   @HostListener('window:resize', ['$event'])
   resizeCanvas(): void {
-    this.chainWidth = window.innerWidth;
+    const windowWidth = this.limitWidth || window.innerWidth;
-    this.chainHeight = Math.max(60, window.innerHeight / 8);
+    const windowHeight = this.limitHeight || window.innerHeight;
-    this.clockSize = Math.min(800, window.innerWidth, window.innerHeight - (1.4 * this.chainHeight));
+    this.chainWidth = windowWidth;
+    this.chainHeight = Math.max(60, windowHeight / 8);
+    this.clockSize = Math.min(800, windowWidth, windowHeight - (1.4 * this.chainHeight));
     const size = Math.ceil(this.clockSize / 75) * 75;
     const margin = (this.clockSize - size) / 2;
     this.blockSizerStyle = {
@@ -90,7 +96,9 @@ export class ClockComponent implements OnInit {
     };
     this.wrapperStyle = {
       '--clock-width': `${this.clockSize}px`,
-      '--chain-height': `${this.chainHeight}px`
+      '--chain-height': `${this.chainHeight}px`,
+      'width': this.limitWidth ? `${this.limitWidth}px` : undefined,
+      'height': this.limitHeight ? `${this.limitHeight}px` : undefined,
     };
     this.cd.markForCheck();
   }

frontend/src/app/components/clockchain/clockchain.component.html

@@ -1,4 +1,7 @@
-<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
+<div
+  class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" #container
+  [class.ltr-transition]="ltrTransitionEnabled" [style.width]="width + 'px'" [style.height]="height + 'px'"
+>
   <div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
     <span>
       <div class="blocks-wrapper">

frontend/src/app/components/clockchain/clockchain.component.scss

@@ -21,9 +21,8 @@
 
 .position-container {
   position: absolute;
-  left: 0;
+  left: 50%;
   top: 0;
-  transform: translateX(50vw);
 }
 
 .black-background {