compute width and height

components/content/MolstarPdbePlugin.vue

@@ -2,10 +2,6 @@
 
 import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
 import { useRuntimeConfig, computed } from '#imports'
-import * as d3 from "d3";
-import * as Plot from "@observablehq/plot";
-import PlotFigure from "~/components/PlotFigure";
-
 import { useDisplay } from "vuetify";
 
 export interface Props {
@@ -18,7 +14,7 @@ export interface Props {
 
 
 
-const { mobile } = useDisplay()
+const { mobile, width, height  } = useDisplay()
 const refinedDataUrls = computed(() => {
 
     function refinedUrl(url: string) {
@@ -59,7 +55,6 @@ const props = withDefaults(defineProps<Props>(), {
     dataUrl: undefined
 })
 
-const { width, height } = useDisplay()
 
 const maxWidth = ref(1500)
 

components/content/PdbeMolstarPlugin.vue

 <script setup lang="ts">
 import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
 import { useRuntimeConfig, computed, toValue } from '#imports'
+import { useDisplay } from "vuetify";
+
 import type { MaybeRef } from "vue"
 import FoldseekDialog from '../FoldseekDialog.vue'
 
+const { mobile, width, height } = useDisplay()
+
+
 useHead({
     link: [
         {
@@ -48,6 +53,15 @@ const selectedPdb: Ref<string | null> = ref(null)
 const structureToDownload: Ref<string | null> = ref(null)
 
 
+const computedWidth = computed(() => {
+    // if (toValue(width) > toValue(maxWidth)) return toValue(maxWidth) / 1.5
+    return toValue(width) / 1.5
+})
+
+const computedHeight = computed(() => {
+    return height.value - 250
+})
+
 function refinedUrl(url: string) {
     if (url?.startsWith('/') && !url.startsWith('//')) {
         const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))