Mobile view design updates.

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

@@ -34,7 +34,7 @@
 
   <table class="table">
     <tr>
-      <td style="width: 50%;">Fee API</td>
+      <td>Fee API</td>
       <td>
         <div class="mx-auto">
           <input class="form-control" type="text" value="https://mempool.space/api/v1/fees/recommended" readonly>
@@ -59,7 +59,7 @@
 
   <table class="table">
     <tr>
-      <td style="width: 50%;">
+      <td>
         <span class="text-small">
           Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
           to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
@@ -70,10 +70,10 @@
           to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'address-block-transactions' for new block confirmed transactions.
         </span>
       </td>
-      <td>
-        <div class="mx-auto">
+    </tr>
+    <tr>
+      <td style="border: 0;">
           <input class="form-control" type="text" value="wss://mempool.space/ws" readonly>
-        </div>
       </td>
     </tr>
   </table>

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

@@ -5,4 +5,8 @@
 .code {
   background-color: #1d1f31;
   font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+tr {
+  white-space: inherit;
 }

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

@@ -6,8 +6,6 @@
 
   <ng-template [ngIf]="!isLoadingBlock && !error">
 
-    <br>
-
     <div class="box">
       <div class="row">
         <div class="col-sm">
@@ -80,8 +78,6 @@
 
     <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ block.tx_count }} transactions</h2>
 
-    <br>
-
     <app-transactions-list [transactions]="transactions" (loadMore)="loadMore()"></app-transactions-list>
 
     <div class="text-center">
@@ -109,8 +105,6 @@
 
   <ng-template [ngIf]="isLoadingBlock && !error">
     
-    <br>
-
     <div class="box">
       <div class="row">
         <div class="col-sm">

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

@@ -1,17 +1,17 @@
 <div class="container-xl">
 
   <div class="title-block">
-    <h1 class="float-md-left">Transaction</h1>
+    <h1 class="float-left mr-3 mb-md-3">Transaction</h1>
 
     <ng-template [ngIf]="tx?.status?.confirmed">
-      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-md-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
+      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
     </ng-template>
     <ng-template [ngIf]="tx && !tx?.status.confirmed">
-      <button type="button" class="btn btn-sm btn-danger float-md-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
+      <button type="button" class="btn btn-sm btn-danger float-right mr-2 mt-1 mt-md-3">Unconfirmed</button>
     </ng-template>
 
     <div>
-      <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">
+      <a [routerLink]="['/tx/', txId]" style="line-height: 56px;">
         <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
         <span class="d-none d-lg-inline">{{ txId }}</span>
       </a>
@@ -19,6 +19,7 @@
     </div>
     <div class="clearfix"></div>
   </div>
+  <div class="clearfix"></div>
 
   <ng-template [ngIf]="!isLoadingTx && !error">
 

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

@@ -23,3 +23,7 @@
 		width: 150px;
 	}
 }
+
+h1 {
+	margin-bottom: 0;
+}

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

@@ -1,7 +1,7 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
     <a [routerLink]="['/tx/', tx.txid]" [state]="{ data: tx }">
-      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 24 }}</span>
+      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
       <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
     </a>
     <div class="float-right">

frontend/src/styles.scss

@@ -331,7 +331,16 @@ tr {
 }
 
 h1, h2, h3 {
-  margin-bottom: 15px;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 767.98px) {
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.50rem;
+  }
 }
 
 @media (min-width: 992px) {