flex layout

components/content/pdockqMatrix.vue

@@ -5,11 +5,14 @@ import PlotFigure from "@/components/PlotFigure";
 // import { useMeiliSearchRef } from 'nuxt-meilisearch'
 import type { SearchResponse } from 'meilisearch'
 import { useRefinedUrl } from "@/composables/useRefinedUrl"
+import { useDisplay } from "vuetify";
 
 
 export interface Props {
     system?: MaybeRef<string | null>
 }
+const { mobile } = useDisplay();
+
 const { page } = useContent();
 const { system } = withDefaults(defineProps<Props>(), { system: null })
 const dbName = "structure"
@@ -170,13 +173,16 @@ function displayStructure(item) {
 }
 </script>
 <template>
-    <v-card flat color="transparent">
-        <v-card-text v-if="computedSystem !== null" v-for="option in computedPDocksMatrixPlotOptions"
-            :key="option.legend.label">
-            <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-row class="d-flex align-content-start" :class="mobile ? 'd-flex-column' : 'd-flex-row'">
+        <v-card v-if="computedSystem !== null" 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-row>
 </template>
\ No newline at end of file