plot width depending on html container

components/content/ArticleSystemDistributionPlot.vue

@@ -4,6 +4,7 @@ import { computed, toValue, ref, onMounted, watchEffect, unref } from 'vue'
 import * as d3 from "d3";
 import * as Plot from "@observablehq/plot";
 import { useDisplay } from "vuetify";
+import { useElementSize } from '@vueuse/core'
 
 export interface PlotMargin {
     marginTop: number,
@@ -14,7 +15,7 @@ export interface PlotMargin {
 
 const margin = ref<PlotMargin>({
     marginTop: 50,
-    marginRight: 50,
+    marginRight: 20,
     marginBottom: 100,
     marginLeft: 40
 
@@ -62,9 +63,11 @@ onMounted(() => {
 })
 
 
+const plotContainer = ref(null)
 
 const computedWidth = computed(() => {
-    const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
+    const screenWidth = useElementSize(plotContainer, { width: 500, height: 0 }, { box: 'border-box' }).width.value
+    // const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
     return Math.max(screenWidth, 550);
 });
 
@@ -225,7 +228,7 @@ async function fetchRefSeqTaxo() {
         </v-card-text>
 
         <v-card variant="elevated" elevation="1" :loading="pending">
-            <v-card-text>
+            <v-card-text ref="plotContainer">
                 <v-row no-gutters>
                     <v-col>
                         <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact"