More battery page styling

src/app/battery/battery.component.html

@@ -1,8 +1,9 @@
+<div class="nav-fix"></div>
 <h1>POWER WALL:
     <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
     <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
 </h1>
-<div class="d-flex flex-column flex-md-row">
+<div class="d-flex flex-column flex-md-row mb-3">
     <div style="overflow: auto">
         <ngx-charts-bar-vertical
             [results]="batteryService.percentageData"
@@ -27,9 +28,8 @@
         ></ngx-charts-bar-vertical>
     </div>
 </div>
-<mat-card *ngFor="let b of batteryService.batteries" class="mt-3">
-    {{b.name}}
-    <br>
+<mat-card *ngFor="let b of batteryService.batteries" class="mb-3">
+    <h3>{{b.name}}</h3>
     {{b.history[0].percentage * 100}}%
     <br>
     {{b.history[0].temp}} °C

src/styles.scss

@@ -35,6 +35,11 @@ html, body {
     }
 }
 
+.nav-fix {
+    width: 100%;
+    height: 64px;
+}
+
 .center {
     position: fixed;
     left: 50%;