Merge branch 'master' into breathe-effect-framerate

frontend/src/app/bisq/lightweight-charts-area/lightweight-charts-area.component.ts

@@ -1,5 +1,5 @@
 import { createChart, CrosshairMode, isBusinessDay } from 'lightweight-charts';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-lightweight-charts-area',
@@ -25,6 +25,15 @@ export class LightweightChartsAreaComponent implements OnInit, OnChanges, OnDest
     private element: ElementRef,
   ) { }
 
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    this.width = this.element.nativeElement.parentElement.offsetWidth;
+    this.chart.applyOptions({
+      width: this.width,
+      height: this.height,
+    });
+  }
+
   ngOnInit() {
     this.width = this.element.nativeElement.parentElement.offsetWidth;
     this.container = document.createElement('div');

frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts

@@ -1,5 +1,5 @@
 import { createChart, CrosshairMode } from 'lightweight-charts';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-lightweight-charts',
@@ -21,6 +21,14 @@ export class LightweightChartsComponent implements OnInit, OnChanges, OnDestroy
     private element: ElementRef,
   ) { }
 
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    this.chart.applyOptions({
+      width: this.element.nativeElement.parentElement.offsetWidth,
+      height: this.height,
+    });
+  }
+
   ngOnInit() {
     this.chart = createChart(this.element.nativeElement, {
       width: this.element.nativeElement.parentElement.offsetWidth,

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -9,7 +9,7 @@
   <table>
     <tbody>
       <tr>
-        <td i18n="shared.transaction">Transaction</td>
+        <td class="td-width" i18n="shared.transaction">Transaction</td>
         <td>
           <a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a>
         </td>
@@ -23,13 +23,13 @@
         <td>{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [value]="fee"></app-fiat></span></td>
       </tr>
       <tr>
-        <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
+        <td class="td-width" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
         <td>
           {{ feeRate | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
         </td>
       </tr>
       <tr>
-        <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
+        <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
       </tr>
     </tbody>

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss

@@ -9,10 +9,14 @@
   justify-content: space-between;
   padding: 10px 15px;
   text-align: left;
-  width: 320px;
+  min-width: 320px;
   pointer-events: none;
 
   &.clickable {
     pointer-events: all;
   }
 }
+
+.td-width {
+  padding-right: 10px;
+}

frontend/src/styles.scss

@@ -1046,3 +1046,7 @@ th {
   box-shadow: -10px -15px 75px rgba(#eba814, 1);
   transition: 100ms all ease-in;
 }
+
+.page-item {
+  font-family: monospace;
+}