From 0d657fa883d19b048eba30bf7d47429537f5efa9 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Sun, 29 Dec 2024 22:04:56 +0100
Subject: [PATCH] fix: better mobile layout

---
 src/components/DataTable.vue | 27 ++++++++++++++++++++++++++-
 src/pages/index.vue          |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 27bcbb1f..922108ad 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -7,7 +7,7 @@
         value="ALL"
         size="large"
         v-on:click="severity = []"
-        class="mr-5"
+        class="mr-5 mb-2"
         :active="severity.length === 0"
         active-color="primary"
       >
@@ -26,6 +26,14 @@
           v-for="severityInformation in vulnerabilityStats.severityInformation"
           :key="severityInformation.severity"
           :value="severityInformation.severity"
+          :prepend-icon="getSeverityIcon(severityInformation.severity)"
+          :aria-label="
+            'Filter for severity ' +
+            severityInformation.severity +
+            ' (' +
+            severityInformation.count +
+            ')'
+          "
         >
           {{ severityInformation.severity }}:
           {{ severityInformation.count }}
@@ -218,6 +226,23 @@ const vulnerabilityStats = computed(() => {
   }
 })
 
+function getSeverityIcon(severity: Severity) {
+  switch (severity) {
+    case "CRITICAL":
+      return "mdi-alert-circle"
+    case "HIGH":
+      return "mdi-alert"
+    case "MEDIUM":
+      return "mdi-alert-outline"
+    case "LOW":
+      return "mdi-information-outline"
+    case "UNKNOWN":
+      return "mdi-help-circle-outline"
+    default:
+      return "mdi-help-circle-outline"
+  }
+}
+
 function compareBySeverity(a: Severity, b: Severity): number {
   return orderedSeverityLevels.indexOf(a) - orderedSeverityLevels.indexOf(b)
 }
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 905e5f0b..3159cd1e 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container class="py-8">
-      <v-row justify="center" align="center" class="mb-8">
+      <v-row justify="center" align="center" class="mb-5">
         <v-col cols="12" class="text-center">
           <h2 class="headline">Instructions</h2>
           <p class="mb-8">