Responsive statistics card in admin dashboard.

frontend/src/scss/_variables.scss

@@ -89,6 +89,14 @@ $nav-header-logo-margin: 0 0.5em 0 0;
 $nav-footer-padding: 0.75em;
 
 // Statistics
+$statistics-card-widths: (
+    xs: 100%,
+    sm: 50%,
+    md: 50%,
+    lg: 33.3333%,
+    xl: 33.3333%,
+    xxl: 33.3333%,
+);
 $statistics-card-height: 4.5em;
 $statistics-card-margin: 0.5em;
 $statistics-card-padding: 0.3em 0.5em;

frontend/src/views/AdminDashboardView.vue

@@ -2,6 +2,7 @@
 import StatisticsCard from "@/components/admin/StatisticsCard.vue";
 import {useStatisticsStore} from "@/stores/statistics";
 import {ComponentVariant, MonitoringState} from "@/types";
+import PageContainer from "@/components/page/PageContainer.vue";
 
 const statistics = useStatisticsStore();
 
@@ -13,7 +14,7 @@ refresh();
 </script>
 
 <template>
-    <div v-if="statistics.getStatistics">
+    <PageContainer v-if="statistics.getStatistics">
         <h2>Knotenstatistik</h2>
 
         <div class="statistics">
@@ -57,13 +58,23 @@ refresh();
                 :filter="{monitoringState: MonitoringState.PENDING}"
             />
         </div>
-    </div>
+    </PageContainer>
 </template>
 
 <style lang="scss" scoped>
+@import "../scss/variables";
+@import "../scss/mixins";
+
 .statistics {
     display: grid;
-    // TODO: Responsive sizes
-    grid-template-columns: repeat(auto-fill, minmax(25%, 100%));
 }
+
+@each $breakpoint, $width in $statistics-card-widths {
+    @include page-breakpoint($breakpoint) {
+        .statistics {
+            grid-template-columns: repeat(auto-fill, $width);
+        }
+    }
+}
+
 </style>