From d1e72c0cc0ee10f7cd14ff82d892be12c2e38756 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Fri, 29 Oct 2021 10:46:16 -0300
Subject: [PATCH] Fix loading icon position.

---
 .../statistics/statistics.component.html      |  2 +-
 .../statistics/statistics.component.scss      | 29 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 183f73935..e6925a512 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -12,7 +12,6 @@
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
           <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
-            <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H (LIVE)
@@ -75,6 +74,7 @@
               <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
             </div>
           </form>
+          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index b9d8f48ac..e9dadd274 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -18,12 +18,14 @@
 .bootstrap-spinner {
   width: 22px;
   height: 22px;
-  margin-right: 10px;
-  order: 2;
   margin-left: 10px;
-  @media (min-width: 653px) {
-    margin-left: 0px;
-    order: 1;
+  position: absolute;
+  top: 17px;
+  right: 25px;
+  @media (min-width: 720px) {
+    position: relative;
+    top: 0px;
+    right: 0px;
   }
 }
 
@@ -38,14 +40,14 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     flex-direction: row;
     float: right;
     margin-top: 0px;
   }
   .btn-sm {
     font-size: 10px;
-    @media (min-width: 768px) {
+    @media (min-width: 790px) {
       font-size: 14px;
     }
   }
@@ -110,12 +112,9 @@
 
 .btn-group-toggle {
   display: inline-flex;
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     display: block;
   }
-  label {
-    padding: 5px;
-  }
 }
 
 .small-buttons {
@@ -126,7 +125,7 @@
   justify-content: space-between;
   flex-direction: row-reverse;
 
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     margin: 2px 0px;
     width: auto;
     flex-direction: row;
@@ -136,21 +135,21 @@
   }
   .btn {
     width: 49.25%;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
     }
   }
   .dropdown {
     width: 49.25%;
     display: flex;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
       margin: 0px 5px;
     }
   }
   #dropdownFees {
     width: 100%;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
     }
   }