diff --git a/biome.json b/biome.json
index 29a5ff5e..d1b2a170 100644
--- a/biome.json
+++ b/biome.json
@@ -9,11 +9,15 @@
   "formatter": {
     "includes": ["**"],
     "indentStyle": "space",
-    "lineWidth": 120
+    "lineWidth": 120,
+    "formatWithErrors": true
   },
   "css": {
     "formatter": {
       "enabled": true
+    },
+    "parser": {
+      "tailwindDirectives": true
     }
   },
   "html": {
diff --git a/bun.lock b/bun.lock
index 44f2dee0..6688d63b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -42,7 +42,7 @@
         "typescript": "^5.9.3",
         "unplugin-vue-components": "^31.0.0",
         "vite": "^7.3.1",
-        "vue-tsc": "^3.2.5",
+        "vue-tsc": "^3.2.6",
       },
       "peerDependencies": {
         "vue": "3.4.21",
@@ -408,7 +408,7 @@
 
     "@vue/compiler-ssr": ["@vue/compiler-ssr@3.4.21", "", { "dependencies": { "@vue/compiler-dom": "3.4.21", "@vue/shared": "3.4.21" } }, "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q=="],
 
-    "@vue/language-core": ["@vue/language-core@3.2.5", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.0.0", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.2" } }, "sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g=="],
+    "@vue/language-core": ["@vue/language-core@3.2.6", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.0.0", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.2" } }, "sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg=="],
 
     "@vue/reactivity": ["@vue/reactivity@3.4.21", "", { "dependencies": { "@vue/shared": "3.4.21" } }, "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw=="],
 
@@ -510,7 +510,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001779", "", {}, "sha512-U5og2PN7V4DMgF50YPNtnZJGWVLFjjsN3zb6uMT5VGYIewieDj1upwfuVNXf4Kor+89c3iCRJnSzMD5LmTvsfA=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001780", "", {}, "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
@@ -1102,7 +1102,7 @@
 
     "sanitize-filename": ["sanitize-filename@1.6.3", "", { "dependencies": { "truncate-utf8-bytes": "^1.0.0" } }, "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg=="],
 
-    "sax": ["sax@1.5.0", "", {}, "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA=="],
+    "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],
 
     "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
@@ -1234,7 +1234,7 @@
 
     "vue": ["vue@3.4.21", "", { "dependencies": { "@vue/compiler-dom": "3.4.21", "@vue/compiler-sfc": "3.4.21", "@vue/runtime-dom": "3.4.21", "@vue/server-renderer": "3.4.21", "@vue/shared": "3.4.21" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA=="],
 
-    "vue-tsc": ["vue-tsc@3.2.5", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.2.5" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA=="],
+    "vue-tsc": ["vue-tsc@3.2.6", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.2.6" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q=="],
 
     "wcwidth": ["wcwidth@1.0.1", "", { "dependencies": { "defaults": "^1.0.3" } }, "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg=="],
 
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index af0e6765..30591e9b 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -27,10 +27,6 @@ export default electronVite.defineConfig({
     build: {
       target: 'esnext'
     },
-    define: {
-      __OPENCOR_DEV__:
-        ((process as unknown as { env?: { NODE_ENV?: string } }).env?.NODE_ENV ?? 'development') !== 'production'
-    },
     envDir: path.join(import.meta.dirname, 'src/renderer'),
     optimizeDeps: {
       esbuildOptions: {
diff --git a/package.json b/package.json
index f13c479f..5cbed2d5 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260317.1",
+  "version": "0.20260318.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -92,6 +92,6 @@
     "typescript": "^5.9.3",
     "unplugin-vue-components": "^31.0.0",
     "vite": "^7.3.1",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.6"
   }
 }
diff --git a/src/renderer/biome.json b/src/renderer/biome.json
index 77d141c3..dea3eb41 100644
--- a/src/renderer/biome.json
+++ b/src/renderer/biome.json
@@ -10,11 +10,15 @@
   "formatter": {
     "includes": ["**"],
     "indentStyle": "space",
-    "lineWidth": 120
+    "lineWidth": 120,
+    "formatWithErrors": true
   },
   "css": {
     "formatter": {
       "enabled": true
+    },
+    "parser": {
+      "tailwindDirectives": true
     }
   },
   "html": {
diff --git a/src/renderer/bun.lock b/src/renderer/bun.lock
index f78e5c3e..b13d0cbe 100644
--- a/src/renderer/bun.lock
+++ b/src/renderer/bun.lock
@@ -31,7 +31,7 @@
         "typescript": "^5.9.3",
         "unplugin-vue-components": "^31.0.0",
         "vite": "^7.3.1",
-        "vue-tsc": "^3.2.5",
+        "vue-tsc": "^3.2.6",
       },
       "peerDependencies": {
         "vue": "3.4.21",
@@ -309,7 +309,7 @@
 
     "@vue/compiler-ssr": ["@vue/compiler-ssr@3.4.21", "", { "dependencies": { "@vue/compiler-dom": "3.4.21", "@vue/shared": "3.4.21" } }, "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q=="],
 
-    "@vue/language-core": ["@vue/language-core@3.2.5", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.0.0", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.2" } }, "sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g=="],
+    "@vue/language-core": ["@vue/language-core@3.2.6", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.0.0", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.2" } }, "sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg=="],
 
     "@vue/reactivity": ["@vue/reactivity@3.4.21", "", { "dependencies": { "@vue/shared": "3.4.21" } }, "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw=="],
 
@@ -357,7 +357,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001779", "", {}, "sha512-U5og2PN7V4DMgF50YPNtnZJGWVLFjjsN3zb6uMT5VGYIewieDj1upwfuVNXf4Kor+89c3iCRJnSzMD5LmTvsfA=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001780", "", {}, "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ=="],
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
@@ -677,7 +677,7 @@
 
     "vue": ["vue@3.4.21", "", { "dependencies": { "@vue/compiler-dom": "3.4.21", "@vue/compiler-sfc": "3.4.21", "@vue/runtime-dom": "3.4.21", "@vue/server-renderer": "3.4.21", "@vue/shared": "3.4.21" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA=="],
 
-    "vue-tsc": ["vue-tsc@3.2.5", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.2.5" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA=="],
+    "vue-tsc": ["vue-tsc@3.2.6", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.2.6" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q=="],
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
diff --git a/src/renderer/package.json b/src/renderer/package.json
index ca5bd914..2eff04ff 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260317.1",
+  "version": "0.20260318.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",
@@ -92,6 +92,6 @@
     "typescript": "^5.9.3",
     "unplugin-vue-components": "^31.0.0",
     "vite": "^7.3.1",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.6"
   }
 }
diff --git a/src/renderer/src/AppWithMultipleInstances.vue b/src/renderer/src/AppWithMultipleInstances.vue
index 96df6712..5a5b7daa 100644
--- a/src/renderer/src/AppWithMultipleInstances.vue
+++ b/src/renderer/src/AppWithMultipleInstances.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen overflow-hidden">
+  <div class="opencor" style="height: 100vh; height: 100dvh; overflow: hidden;">
     <Splitter class="h-full" layout="vertical">
       <SplitterPanel :size="15">
         <OpenCOR />
diff --git a/src/renderer/src/AppWithSimulationData.vue b/src/renderer/src/AppWithSimulationData.vue
index 386b4de6..75ec90b8 100644
--- a/src/renderer/src/AppWithSimulationData.vue
+++ b/src/renderer/src/AppWithSimulationData.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="h-full flex flex-col">
-    <div class="flex p-2 space-x-2 justify-center">
-      <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(voi) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(voi)">VOI</button>
-      <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(mainT) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(mainT)">main/t</button>
-      <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(mainXYZ) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(mainXYZ)">main/xyz</button>
-      <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(unknown) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(unknown)">unknown</button>
-      <button class="flex-1 px-4 py-2 rounded bg-red-600 disabled:opacity-50 text-center cursor-pointer disabled:cursor-default" :disabled="!simulationDataTracked.length" @click="untrackAllModelParameters">All</button>
-    </div>
-    <div class="flex flex-1">
-      <OpenCOR class="flex-1" ref="opencorRef"
-        omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex"
-        @simulationData="onSimulationData"
-      />
+  <div class="opencor" style="height: 100vh; height: 100dvh;">
+    <div class="h-full flex flex-col">
+      <div class="flex p-2 space-x-2 justify-center">
+        <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(voi) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(voi)">VOI</button>
+        <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(mainT) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(mainT)">main/t</button>
+        <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(mainXYZ) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(mainXYZ)">main/xyz</button>
+        <button :class="['flex-1 px-4 py-2 rounded text-center cursor-pointer', areModelParametersTracked(unknown) ? 'bg-red-600' : 'bg-green-600']" @click="trackOrUntrackModelParameters(unknown)">unknown</button>
+        <button class="flex-1 px-4 py-2 rounded bg-red-600 disabled:opacity-50 text-center cursor-pointer disabled:cursor-default" :disabled="!simulationDataTracked.length" @click="untrackAllModelParameters">All</button>
+      </div>
+      <div class="flex flex-1">
+        <OpenCOR class="flex-1" ref="opencorRef"
+          omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex"
+          @simulationData="onSimulationData"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/renderer/src/AppWithinContainers.vue b/src/renderer/src/AppWithinContainers.vue
index 1229b277..d665df1f 100644
--- a/src/renderer/src/AppWithinContainers.vue
+++ b/src/renderer/src/AppWithinContainers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen">
+  <div class="opencor" style="height: 100vh; height: 100dvh;">
     <Splitter class="h-full" layout="vertical">
       <SplitterPanel class="flex items-center justify-center bg-blue-500" :size="15">Top panel...</SplitterPanel>
       <SplitterPanel :size="50">
diff --git a/src/renderer/src/assets/app.css b/src/renderer/src/assets/app.css
index a560b838..135ec8a7 100644
--- a/src/renderer/src/assets/app.css
+++ b/src/renderer/src/assets/app.css
@@ -1,8 +1,18 @@
+/* stylelint-disable at-rule-no-unknown, no-invalid-position-at-import-rule */
+@config "../../tailwind.config.ts";
+
 @layer theme, base, components, utilities;
 
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: ignored using `--suppress` */
 @import "tailwindcss/theme.css" layer(theme);
+
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: ignored using `--suppress` */
 @import "tailwindcss/utilities.css" layer(utilities);
+
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: ignored using `--suppress` */
 @import "tailwindcss-primeui";
+
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: ignored using `--suppress` */
 @import "primeicons/primeicons.css";
 
 body {
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 33302f3e..ce7e64ce 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -1,5 +1,5 @@
 <template>
-  <SafeBlockUI ref="safeBlockUiRef" class="opencor overflow-hidden h-full" :class="isFullWebApp ? 'with-main-menu' : ''"
+  <SafeBlockUI ref="safeBlockUiRef" class="opencor" :class="isFullWebApp ? 'with-main-menu' : ''"
     :blocked="compBlockUiEnabled"
     @click="activateInstance"
     @focus="activateInstance"
@@ -1256,6 +1256,11 @@ const onGitHubButtonClick = async (): Promise<void> => {
   }
 }
 
+.opencor {
+  height: 100%;
+  overflow: hidden;
+}
+
 :deep(.p-overlay-mask) {
   border-radius: 0;
 }
diff --git a/src/renderer/src/components/widgets/GraphPanelWidget.vue b/src/renderer/src/components/widgets/GraphPanelWidget.vue
index 9c622a7e..cb0d3376 100644
--- a/src/renderer/src/components/widgets/GraphPanelWidget.vue
+++ b/src/renderer/src/components/widgets/GraphPanelWidget.vue
@@ -7,6 +7,8 @@
 </template>
 
 <script setup lang="ts">
+import * as vueusecore from '@vueuse/core';
+
 import ContextMenu from 'primevue/contextmenu';
 import type { MenuItem } from 'primevue/menuitem';
 import * as vue from 'vue';
@@ -51,6 +53,10 @@ export interface IGraphPanelMargins {
   right: number;
 }
 
+const sameMargins = (firstMargins: IGraphPanelMargins | undefined, secondMargins: IGraphPanelMargins): boolean => {
+  return firstMargins?.left === secondMargins.left && firstMargins?.right === secondMargins.right;
+};
+
 const props = withDefaults(
   defineProps<{
     data: IGraphPanelData;
@@ -69,16 +75,35 @@ const emit = defineEmits<{
   (event: 'resetMargins'): void;
 }>();
 
+const trackSize = (): void => {
+  trackedWidth = mainDivRef.value?.clientWidth || 0;
+  trackedHeight = mainDivRef.value?.clientHeight || 0;
+};
+
+const queueResize = (): void => {
+  if (resizeQueued) {
+    return;
+  }
+
+  resizeQueued = true;
+
+  requestAnimationFrame(() => {
+    resizeQueued = false;
+
+    resize();
+  });
+};
+
 const resize = (): Promise<unknown> => {
-  return Promise.resolve()
-    .then(() => {
-      if (mainDivRef.value) {
-        dependencies._plotlyJs.Plots.resize(mainDivRef.value);
-      }
-    })
-    .then(() => {
-      updateMarginsAsync();
-    });
+  if (!mainDivRef.value || !plotIsReady) {
+    return Promise.resolve();
+  }
+
+  return Promise.resolve(dependencies._plotlyJs.Plots.resize(mainDivRef.value)).then(() => {
+    trackSize();
+
+    updateMarginsAsync();
+  });
 };
 
 defineExpose({
@@ -91,8 +116,14 @@ const isVisible = vue.ref(false);
 const margins = vue.ref<IGraphPanelMargins>({ left: -1, right: -1 });
 const theme = vueCommon.useTheme();
 const contextMenuRef = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
-let updatingMargins = false;
 const progressMessage = vue.inject<IProgressMessage>('progressMessage');
+let updatingMargins = false;
+let plotIsReady = false;
+let resizeQueued = false;
+let trackedWidth = 0;
+let trackedHeight = 0;
+let trackedMargins: IGraphPanelMargins | undefined;
+let stopTrackingContainerSize: (() => void) | undefined;
 
 // Context menu functionality.
 
@@ -496,9 +527,18 @@ const resolvedMargin = (propValue: number | undefined, compValue: number): numbe
 };
 
 const compMargins = (): IGraphPanelMargins => {
+  const mainDiv = mainDivRef.value;
+
+  if (!mainDiv) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+
   // Retrieve the width of the Y ticks.
 
-  const yTicks = mainDivRef.value?.querySelectorAll('.ytick text');
+  const yTicks = mainDiv.querySelectorAll('.ytick text');
   let yTicksWidth = 0;
 
   if (yTicks?.length) {
@@ -509,9 +549,7 @@ const compMargins = (): IGraphPanelMargins => {
 
   // Retrieve the width of the Y Axis title.
 
-  const yTitleWidth = props.data.yAxisTitle
-    ? mainDivRef.value?.querySelector('.ytitle')?.getBoundingClientRect()?.width || 0
-    : 0;
+  const yTitleWidth = props.data.yAxisTitle ? mainDiv.querySelector('.ytitle')?.getBoundingClientRect()?.width || 0 : 0;
 
   // Compute the final left margin.
 
@@ -525,10 +563,10 @@ const compMargins = (): IGraphPanelMargins => {
   let rightMargin = 0;
 
   if (props.showLegend) {
-    rightMargin = mainDivRef.value?.querySelector('.legend')?.getBoundingClientRect()?.width || 0;
+    rightMargin = mainDiv.querySelector('.legend')?.getBoundingClientRect()?.width || 0;
   }
 
-  const xTicks = mainDivRef.value?.querySelectorAll('.xtick text');
+  const xTicks = mainDiv.querySelectorAll('.xtick text');
 
   if (xTicks?.length) {
     const lastTick = xTicks[xTicks.length - 1] as HTMLElement;
@@ -561,7 +599,11 @@ const updateMarginsAsync = (): void => {
   requestAnimationFrame(() => {
     const newMargins = compMargins();
 
-    emit('marginsUpdated', newMargins);
+    if (!sameMargins(trackedMargins, newMargins)) {
+      trackedMargins = newMargins;
+
+      emit('marginsUpdated', newMargins);
+    }
 
     // Update our margins if they have changed.
 
@@ -590,6 +632,8 @@ const updateMarginsAsync = (): void => {
 };
 
 const updatePlot = (): void => {
+  plotIsReady = false;
+
   // Reset our margins if they are not overridden.
 
   if (!props.margins) {
@@ -634,6 +678,8 @@ const updatePlot = (): void => {
       }
     )
     .then(() => {
+      plotIsReady = true;
+
       if (!isVisible.value) {
         // Force Plotly to recalculate the layout after the plot is rendered to ensure that it has correct dimensions.
 
@@ -641,6 +687,8 @@ const updatePlot = (): void => {
       }
     })
     .then(() => {
+      trackSize();
+
       if (!isVisible.value) {
         // Show the component now that the plot has been properly sized.
 
@@ -675,6 +723,32 @@ const handleContextMenu = (event: Event): void => {
 vue.onMounted(() => {
   window.addEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
 
+  const { stop } = vueusecore.useResizeObserver(
+    mainDivRef,
+    () => {
+      const width = mainDivRef.value?.clientWidth || 0;
+      const height = mainDivRef.value?.clientHeight || 0;
+
+      if (!plotIsReady || width <= 0 || height <= 0) {
+        return;
+      }
+
+      if (width === trackedWidth && height === trackedHeight) {
+        return;
+      }
+
+      trackedWidth = width;
+      trackedHeight = height;
+
+      queueResize();
+    },
+    {
+      box: 'border-box'
+    }
+  );
+
+  stopTrackingContainerSize = stop;
+
   vue.nextTick(() => {
     // Reset our margins on double-click and relayout.
 
@@ -696,6 +770,8 @@ vue.onMounted(() => {
 
 vue.onUnmounted(() => {
   window.removeEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
+
+  stopTrackingContainerSize?.();
 });
 
 vue.watch(
@@ -712,7 +788,7 @@ vue.watch(
   () => theme.useLightMode(),
   () => {
     vue.nextTick(() => {
-      if (mainDivRef.value) {
+      if (plotIsReady && mainDivRef.value) {
         dependencies._plotlyJs.relayout(mainDivRef.value, {
           ...themeData(),
           ...axesData()
@@ -728,7 +804,7 @@ vue.watch(
   () => {
     vue
       .nextTick(() => {
-        if (mainDivRef.value) {
+        if (plotIsReady && mainDivRef.value) {
           return dependencies._plotlyJs.relayout(mainDivRef.value, {
             'margin.l': resolvedMargin(props.margins?.left, margins.value.left),
             'margin.r': resolvedMargin(props.margins?.right, margins.value.right)
@@ -748,7 +824,7 @@ vue.watch(
   () => props.showLegend,
   () => {
     vue.nextTick(() => {
-      if (mainDivRef.value) {
+      if (plotIsReady && mainDivRef.value) {
         dependencies._plotlyJs
           .relayout(mainDivRef.value, {
             showlegend: props.showLegend
diff --git a/src/renderer/src/components/widgets/SafeBlockUI.vue b/src/renderer/src/components/widgets/SafeBlockUI.vue
index 4a305735..8c0a1a11 100644
--- a/src/renderer/src/components/widgets/SafeBlockUI.vue
+++ b/src/renderer/src/components/widgets/SafeBlockUI.vue
@@ -4,8 +4,6 @@ import { ZIndex } from '@primeuix/utils/zindex';
 import BlockUI from 'primevue/blockui';
 import * as vue from 'vue';
 
-declare const __OPENCOR_DEV__: boolean;
-
 // This component is a wrapper around PrimeVue's BlockUI. It provides a safe implementation of the block and unblock
 // methods that ensure that we don't attempt to block if we are already blocked, and that we properly remove the mask
 // when unblocking. This is necessary because PrimeVue's BlockUI does not account for the case where multiple block
@@ -38,20 +36,6 @@ export default vue.defineComponent({
     const instance = vue.getCurrentInstance();
     const self = instance?.proxy as unknown as BlockUISafeInstance;
 
-    // Confirm that the version of PrimeVue we are using is compatible with our implementation.
-
-    if (typeof __OPENCOR_DEV__ !== 'undefined' && __OPENCOR_DEV__) {
-      const EXPECTED_PRIMEVUE_VERSION = '4.2.5';
-
-      import('../../../../../node_modules/primevue/package.json').then(({ default: primeVuePkg }) => {
-        if (primeVuePkg.version !== EXPECTED_PRIMEVUE_VERSION) {
-          throw new Error(
-            `SafeBlockUI is designed to work with PrimeVue version ${EXPECTED_PRIMEVUE_VERSION}, but the current version is ${primeVuePkg.version}. Please check if there are any changes to the BlockUI component that might affect our implementation.`
-          );
-        }
-      });
-    }
-
     const block = (): void => {
       // Don't attempt to block if we are already blocked.
       // Note: this can happen if the block event is emitted multiple times before the unblock event is emitted. In
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index bd63f25a..ff7e5fed 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -8,3 +8,11 @@ import App from './App.vue';
 // import App from './AppWithSimulationData.vue';
 
 createApp(App).mount('#app');
+
+// Note: we are using the "opencor" class as the Tailwind CSS `important` selector to help protect our styles from being
+//       overridden by the styles of a host application when OpenCOR is used as a library. Layered CSS (e.g.,
+//       `@layer base`) always loses to unlayered CSS, regardless of specificity, so using an `important` selector alone
+//       is not sufficient if our styles remain in a Tailwind CSS layer. Our actual solution relies on 1) using the
+//       "opencor" class as the Tailwind CSS `important` selector and on 2) unwrapping/stripping Tailwind CSS layers in
+//       the library build, so that OpenCOR's styles are emitted as unlayered CSS with higher effective specificity than
+//       the host application's styles.
diff --git a/src/renderer/tailwind.config.js b/src/renderer/tailwind.config.js
deleted file mode 100644
index 06458d1c..00000000
--- a/src/renderer/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['index.html', 'src/**/*.{vue,ts}'],
-  theme: {
-    extend: {}
-  },
-  plugins: [require('tailwindcss-primeui')]
-};
diff --git a/src/renderer/tailwind.config.ts b/src/renderer/tailwind.config.ts
new file mode 100644
index 00000000..da0b7b96
--- /dev/null
+++ b/src/renderer/tailwind.config.ts
@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['index.html', 'src/**/*.{vue,ts}'],
+  important: '.opencor',
+  theme: {
+    extend: {}
+  }
+};
+
+export default config;
diff --git a/src/renderer/vite.config.ts b/src/renderer/vite.config.ts
index f1189140..90a9728f 100644
--- a/src/renderer/vite.config.ts
+++ b/src/renderer/vite.config.ts
@@ -22,10 +22,6 @@ export default vite.defineConfig({
     },
     target: 'esnext'
   },
-  define: {
-    __OPENCOR_DEV__:
-      ((process as unknown as { env?: { NODE_ENV?: string } }).env?.NODE_ENV ?? 'development') !== 'production'
-  },
   optimizeDeps: {
     esbuildOptions: {
       target: 'esnext'
diff --git a/src/renderer/vite.lib.config.ts b/src/renderer/vite.lib.config.ts
index 693b76cf..167e56b1 100644
--- a/src/renderer/vite.lib.config.ts
+++ b/src/renderer/vite.lib.config.ts
@@ -31,18 +31,97 @@ export default vite.defineConfig({
     },
     target: 'esnext'
   },
-  define: {
-    __OPENCOR_DEV__:
-      ((process as unknown as { env?: { NODE_ENV?: string } }).env?.NODE_ENV ?? 'development') !== 'production'
-  },
   optimizeDeps: {
     esbuildOptions: {
       target: 'esnext'
     }
   },
   plugins: [
-    // Note: this must be in sync with vite.config.ts.
+    // Note: this must be in sync with vite.config.ts, except for the process-css-layers plugin which is only needed for
+    //       the library build (to prevent styles from leaking into and being overridden by host apps).
+
+    {
+      // Plugin to process CSS layers for library distribution:
+      //  1. Strip @layer base blocks (Tailwind CSS preflight) to prevent leaking into host apps.
+      //  2. Unwrap remaining @layer blocks so that the important: '.opencor' selector strategy provides real
+      //     specificity protection against host app CSS. (Layered CSS always loses to unlayered CSS, regardless of
+      //     specificity.)
+      //  3. Remove bare @layer ordering declarations.
+
+      name: 'process-css-layers',
+      enforce: 'post' as const,
+      generateBundle(_options, bundle) {
+        for (const asset of Object.values(bundle)) {
+          if (asset.type === 'asset' && typeof asset.source === 'string' && asset.fileName.endsWith('.css')) {
+            // Process @layer blocks: strip base, unwrap others.
+
+            const processLayers = (source: string): string => {
+              const layerBlockRegEx = /@layer\s+([\w-]+)\s*\{/g;
+              let res = '';
+              let pos = 0;
+
+              for (;;) {
+                layerBlockRegEx.lastIndex = pos;
+
+                const match = layerBlockRegEx.exec(source);
+
+                if (!match) {
+                  res += source.slice(pos);
+
+                  break;
+                }
+
+                const layerName = match[1] ?? '';
+                const start = match.index;
+                const contentStart = start + match[0].length;
+
+                // Scan forward to find the matching closing brace.
+
+                let depth = 1;
+                let i = contentStart;
+
+                while (i < source.length && depth > 0) {
+                  if (source[i] === '{') {
+                    ++depth;
+                  } else if (source[i] === '}') {
+                    --depth;
+                  }
+
+                  ++i;
+                }
+
+                const end = i; // One past the closing '}'.
 
+                // Append everything before this @layer block unchanged.
+
+                res += source.slice(pos, start);
+
+                if (layerName !== 'base') {
+                  // Unwrap: keep content, remove @layer wrapper.
+                  // Note: we recurse so any nested @layer blocks are also processed.
+
+                  res += processLayers(source.slice(contentStart, end - 1));
+                }
+
+                // 'base' is stripped entirely (no append).
+
+                pos = end;
+              }
+
+              return res;
+            };
+
+            let css = processLayers(asset.source);
+
+            // Remove bare @layer ordering declarations (e.g., "@layer base, components;").
+
+            css = css.replace(/@layer\s+[\w\s,-]+;/g, '');
+
+            asset.source = css;
+          }
+        }
+      }
+    },
     tailwindcssPlugin(),
     vuePlugin(),
     vitePlugin({