handle mission matrix

components/content/pdockqMatrix.vue

@@ -185,17 +185,20 @@ function displayStructure(item) {
 }
 </script>
 <template>
-    <v-row class="d-flex align-content-start" :class="mobile ? 'd-flex-column' : 'd-flex-row'">
-        <v-card v-if="computedSystem !== null && groupedPdocks?.length > 0" v-for="option in computedPDocksMatrixPlotOptions"
-            :key="option.legend.label" flat color="transparent">
+    <v-row v-if="computedSystem !== null && groupedPdocks?.length > 0" class="d-flex align-content-start"
+        :class="mobile ? 'd-flex-column' : 'd-flex-row'">
+        <v-card v-for="option in computedPDocksMatrixPlotOptions" :key="option.legend.label" flat color="transparent">
             <v-card-text>
                 <PlotFigure ref="matrixPlot" :options="unref(option)" defer class="pdockq-plot"
                     :data-label="option.legend.label"></PlotFigure>
             </v-card-text>
             <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
         </v-card>
-        <v-card v-else>
-            <v-alert type="info">No matrix available for this system</v-alert>
-        </v-card>
+
     </v-row>
+    <v-card v-else flat color="transparent">
+        <v-card-text>
+            <v-alert type="info" variant="tonal">No matrix available for this system.</v-alert>
+        </v-card-text>
+    </v-card>
 </template>
\ No newline at end of file