fix: better mobile layout

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)
 }

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">