Restructure fire page

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -1,8 +1,22 @@
 <div class="container">
-  <div class="row">
+  <div class="row mb-5">
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
-      <div class="mb-5">
+      <div>
+        <h4 class="mb-3" i18n>Calculator</h4>
+        <gf-fire-calculator
+          [currency]="user?.settings?.baseCurrency"
+          [deviceType]="deviceType"
+          [fireWealth]="fireWealth?.toNumber()"
+          [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
+          [locale]="user?.settings?.locale"
+          [savingsRate]="user?.settings?.savingsRate"
+          (savingsRateChanged)="onSavingsRateChange($event)"
+        ></gf-fire-calculator>
+      </div>
+    </div>
+  </div>
+  <div>
     <h4 i18n>4% Rule</h4>
     <div *ngIf="isLoading">
       <ngx-skeleton-loader
@@ -51,18 +65,4 @@
       and a withdrawal rate of 4%.
     </div>
   </div>
-    </div>
-  </div>
-  <div>
-    <h4 class="mb-3" i18n>Calculator</h4>
-    <gf-fire-calculator
-      [currency]="user?.settings?.baseCurrency"
-      [deviceType]="deviceType"
-      [fireWealth]="fireWealth?.toNumber()"
-      [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
-      [locale]="user?.settings?.locale"
-      [savingsRate]="user?.settings?.savingsRate"
-      (savingsRateChanged)="onSavingsRateChange($event)"
-    ></gf-fire-calculator>
-  </div>
 </div>

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -1,7 +1,7 @@
 <div class="container p-0">
   <div class="row">
     <div class="col-md-3">
-      <form class="" [formGroup]="calculatorForm">
+      <form class="mb-4" [formGroup]="calculatorForm">
         <!--<mat-form-field appearance="outline">
           <input formControlName="principalInvestmentAmount" matInput />
         </mat-form-field>-->