Merge pull request #2951 from mempool/mononaut/fix-mobile-bottom-nav

Fix page elements obscured by bottom navbar on mobile

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -27,6 +27,9 @@
 
   <br>
   <ngb-pagination *ngIf="blocks.value" class="pagination-container" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
+
+  <div class="clearfix"></div>
+  <br>
   </ng-container>
 </div>
 

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

@@ -20,6 +20,8 @@
 
   <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
 
+  <div class="clearfix"></div>
+  <br>
 </ng-container>
 
 <ng-template #isLoading>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

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

@@ -333,6 +333,9 @@
       </div>
     </ng-template>
     <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
+
+    <div class="clearfix"></div>
+    <br>
   </ng-template>
   <ng-template [ngIf]="error">
     <div class="text-center">

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

@@ -122,6 +122,9 @@
       [collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
       (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
     </ngb-pagination>
+
+    <div class="clearfix"></div>
+    <br>
   </div>
   
 </div>

frontend/src/app/components/blocks-list/blocks-list.component.scss

@@ -6,7 +6,6 @@
 
 .container-xl {
   max-width: 1400px;
-  padding-bottom: 100px;
 }
 .container-xl.widget {
   padding-left: 0px;

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

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

@@ -1,5 +1,5 @@
 .container-graph {
-  padding: 0px 15px;
+  padding: 0px 15px 60px;
 }
 
 .card-header {

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

@@ -464,6 +464,8 @@
     </ng-template>
   </ng-template>
 
+  <br>
+
 </div>
 
 <br>

frontend/src/app/dashboard/dashboard.component.html

@@ -154,6 +154,8 @@
     <a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
   </div>
 
+  <br>
+
 </div>
 
 <ng-template #loadingAssetsTable>

frontend/src/app/docs/docs/docs.component.html

@@ -53,5 +53,7 @@
       <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
     </div>
 
+    <br>
+
   </div>
 </div>

frontend/src/app/lightning/channels-list/channels-list.component.html

@@ -28,6 +28,9 @@
   <table class="table table-borderless" *ngIf="response.channels.length === 0">
     <div class="d-flex justify-content-center" i18n="lightning.empty-channels-list">No channels to display</div>
   </table>
+
+  <div class="clearfix"></div>
+  <br>
 </div>
   
 <ng-template #tableHeader>

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -83,11 +83,12 @@
     </div>
 
   </div>
-</div>
 
+  <div class="text-small text-center mt-1" *ngIf="officialMempoolSpace">
+    <a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
+  </div>
 
-<div class="text-small text-center mt-1" *ngIf="officialMempoolSpace">
-  <a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
+  <br>
 </div>
 
 <br>

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss

@@ -23,7 +23,6 @@
   min-height: 500px;
   height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: 100%;
     padding-bottom: 100px;
   };
 }