💄 make scaleable

and move csv export down

Author: lukasbm

frontend/src/app/statistics-tab/statistics-tab.component.css

@@ -0,0 +1,4 @@
+.chart {
+    width: 100%;
+    height: 100%;
+}

frontend/src/app/statistics-tab/statistics-tab.component.html

@@ -1,22 +1,8 @@
-<mat-card style="padding-bottom: 4%">
-  <mat-card-content
-    style="
-      background-color: white;
-      padding-top: 3%;
-      padding-left: 2%;
-      font-size: large;
-      padding-bottom: 2%;
-      border-bottom: 2px solid lightgray;
-    "
-  >
-    Ergebnisse des Linters als .csv exportieren:
-    <a mat-raised-button download href="{{ csvExportLink }}" color="primary"
-      >Download</a
-    >
-  </mat-card-content>
-  <mat-grid-list cols="2" rowHeight="700px" style="margin-bottom: 3%">
+<!-- stats -->
+<mat-card>
+  <mat-grid-list cols="2" style="margin-bottom: 3%">
     <mat-grid-tile [colspan]="1" [rowspan]="1">
-      <mat-card-content style="width: 100%; height: 100%">
+      <mat-card-content class="chart">
         <div
           fxLayout="column"
           fxLayoutAlign="center center"
@@ -28,7 +14,7 @@
       </mat-card-content>
     </mat-grid-tile>
     <mat-grid-tile [colspan]="1" [rowspan]="1">
-      <mat-card-content style="width: 100%; height: 100%">
+      <mat-card-content class="chart">
         <div
           fxLayout="column"
           fxLayoutAlign="center center"
@@ -40,7 +26,7 @@
       </mat-card-content>
     </mat-grid-tile>
     <mat-grid-tile [colspan]="1" [rowspan]="1">
-      <mat-card-content style="width: 100%; height: 100%">
+      <mat-card-content class="chart">
         <div
           fxLayout="column"
           fxLayoutAlign="center center"
@@ -52,7 +38,7 @@
       </mat-card-content>
     </mat-grid-tile>
     <mat-grid-tile [colspan]="1" [rowspan]="1">
-      <mat-card-content style="width: 100%; height: 100%">
+      <mat-card-content class="chart">
         <div
           fxLayout="column"
           fxLayoutAlign="center center"
@@ -65,3 +51,24 @@
     </mat-grid-tile>
   </mat-grid-list>
 </mat-card>
+<!-- END stats -->
+
+<!-- csv export -->
+<mat-card style="padding-bottom: 4%">
+  <mat-card-content
+    style="
+      background-color: white;
+      padding-top: 3%;
+      padding-left: 2%;
+      font-size: large;
+      padding-bottom: 2%;
+      border-bottom: 2px solid lightgray;
+    "
+  >
+    Ergebnisse des Linters als .csv exportieren:
+    <a mat-raised-button download href="{{ csvExportLink }}" color="primary"
+      >Download</a
+    >
+  </mat-card-content>
+</mat-card>
+<!-- END csv export -->