put message no results in card

frontend/pages/analyses/[analysisId]/genes.vue

@@ -50,9 +50,11 @@ const sanitizedGenes = computed(() => {
 </script>
 <template>
   <AnalysisResultDataTable v-if="sanitizedGenes.length > 0" :items="sanitizedGenes" :headers="headers" />
-  <v-else>
-    <v-alert type="info" variant="tonal">
-      No gene found.
-    </v-alert>
-  </v-else>
+    <v-card v-else flat color="transparent">
+      <v-card-text>
+        <v-alert type="info" variant="tonal">
+          No gene found
+        </v-alert>
+      </v-card-text>
+    </v-card>
 </template>

frontend/pages/analyses/[analysisId]/hmmer.vue

@@ -37,7 +37,12 @@ const sanitizedHmmer = computed(() => {
 </script>
 <template>
     <AnalysisResultDataTable v-if="sanitizedHmmer.length > 0" :items="sanitizedHmmer" :headers="headers" />
-    <v-alert type="info" variant="tonal">
-        No hmmer hit.
-    </v-alert>
+    <v-card v-else flat color="transparent">
+        <v-card-text>
+            <v-alert type="info" variant="tonal">
+                No hmmer hit
+            </v-alert>
+        </v-card-text>
+    </v-card>
+
 </template>

frontend/pages/analyses/[analysisId]/systems.vue

@@ -37,7 +37,12 @@ const sanitizedSystems = computed(() => {
 </script>
 <template>
   <AnalysisResultDataTable v-if="sanitizedSystems.length > 0" :items="sanitizedSystems" :headers="headers" />
-    <v-alert type="info" variant="tonal">
-        No system found.
-    </v-alert>
+  <v-card v-else flat color="transparent">
+    <v-card-text>
+      <v-alert type="info" variant="tonal">
+        No system found
+      </v-alert>
+    </v-card-text>
+  </v-card>
+
 </template>