Merge pull request #4521 from mempool/mononaut/responsive-acceleration-dash

Fix widget responsiveness on acceleration dashboard

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -1,10 +1,10 @@
-<div class="container-xl" style="min-height: 335px" [class.widget]="widget" [class.full-height]="!widget">
+<div class="container-xl widget-container" [class.widget]="widget" [class.full-height]="!widget">
   <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
 
-  <div style="min-height: 295px" *ngIf="accelerationList$ | async as accelerations">
+  <div class="acceleration-list" *ngIf="accelerationList$ | async as accelerations">
     <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss

@@ -14,11 +14,24 @@
 .container-xl.legacy {
   max-width: 1140px;
 }
+.container-xl.widget-container {
+  min-height: 335px;
+  @media (max-width: 767px) {
+    min-height: auto;
+  }
+}
 
 .container {
   max-width: 100%;
 }
 
+.acceleration-list {
+  min-height: 295px;
+  @media (max-width: 767px) {
+    min-height: auto;
+  }
+}
+
 tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;
@@ -51,34 +64,63 @@ tr, td, th {
 
 .txid {
   width: 25%;
-  @media (max-width: 1100px) {
-    padding-right: 10px;
-  }
-  @media (max-width: 875px) {
-    display: none;
-  }
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 30%;
+  @media (max-width: 1060px) and (min-width: 768px) {
+    display: none;
+  }
+  @media (max-width: 500px) {
+    display: none;
+  }
 }
 
-.fee {
-  width: 35%;
-}
-
-.block {
+.fee-rate {
   width: 20%;
+  @media (max-width: 1060px) and (min-width: 768px) {
+    text-align: start !important;
+  }
+  @media (max-width: 500px) {
+    text-align: start !important;
+  }
+  @media (max-width: 840px) and (min-width: 768px) {
+    display: none;
+  }
+  @media (max-width: 410px) {
+    display: none;
+  }
 }
 
 .bid {
   width: 30%;
+  min-width: 150px;
+  @media (max-width: 840px) and (min-width: 768px) {
+    text-align: start !important;
+  }
+  @media (max-width: 410px) {
+    text-align: start !important;
+  }
 }
 
 .time {
   width: 25%;
 }
 
+.fee {
+  width: 35%;
+  @media (max-width: 1060px) and (min-width: 768px) {
+    text-align: start !important;
+  }
+  @media (max-width: 500px) {
+    text-align: start !important;
+  }
+}
+
+.block {
+  width: 20%;
+}
+
 .status {
   width: 20%
 }
@@ -122,4 +164,7 @@ tr, td, th {
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  @media (max-width: 767px) {
+    height: 100px;
+  }
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -139,6 +139,9 @@
 }
 .list-card {
   height: 410px;
+  @media (max-width: 767px) {
+    height: auto;
+  }
 }
 
 .mempool-block-wrapper {