Liquid Graph fix.

Key navigation fix.
Addresses overflow fix.
Firefox float fix.

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

@@ -20,7 +20,7 @@ export class AppComponent {
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
-    if (event.target !== document.body) {
+    if (event.target instanceof HTMLInputElement) {
       return;
     }
     this.stateService.keyNavigation$.next(event);

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -14,7 +14,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() data;
   @Input() dateSpan = '2h';
 
-  network = '';
   mempoolVsizeFeesOptions: any;
   mempoolVsizeFeesData: any;
 
@@ -25,7 +24,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit(): void {
-    this.stateService.networkChanged$.subscribe((network) => this.network = network);
     const labelInterpolationFnc = (value: any, index: any) => {
       switch (this.dateSpan) {
         case '2h':
@@ -71,7 +69,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                return '350+';
               }
               if (i === 0) {
-                if (this.network === 'liquid') {
+                if (this.stateService.network === 'liquid') {
                   return '0 - 1';
                 }
                 return '1 sat/vB';
@@ -94,7 +92,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     const finalArrayVbyte = this.generateArray(mempoolStats);
 
     // Only Liquid has lower than 1 sat/vb transactions
-    if (this.network !== 'liquid') {
+    if (this.stateService.network !== 'liquid') {
       finalArrayVbyte.shift();
     }
 

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -10,6 +10,7 @@
         <i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since> ago</i>
       </ng-template>
     </div>
+    <div class="clearfix"></div>
   </div>
   <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [fromRoot]="true" [infiniteScrollContainer]="'body'" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
     <div class="row">
@@ -41,7 +42,7 @@
                   <ng-container *ngSwitchDefault>
                     <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
                       <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</span>
+                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
                     </a>
                     <div>
                       <app-address-labels [vin]="vin"></app-address-labels>
@@ -69,13 +70,13 @@
               <td>
                 <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                   <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
-                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 42 }}</span>
+                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
                 </a>
                 <ng-template #scriptpubkey_type>
                   <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
                     Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
                       <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 42 }}</span>
+                      <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
                     </a>
                   </ng-template>
                   <ng-template #defaultscriptpubkey_type>

frontend/src/styles.scss

@@ -48,9 +48,6 @@ body {
   min-height: 1px;
   padding: 1.25rem;
   position: relative;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   min-width: 0;
   word-wrap: break-word;
   background-color: #24273e;