From e04292fe6ed2e748b6bebc7ef73a315b45a9e820 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 20 Jan 2026 11:54:50 +1300
Subject: [PATCH 1/3] New version.

---
 package.json              | 2 +-
 src/renderer/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ae65a71b..aa81d2d6 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260119.2",
+  "version": "0.20260120.0",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",
diff --git a/src/renderer/package.json b/src/renderer/package.json
index 3b35a50b..c4932013 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260119.2",
+  "version": "0.20260120.0",
   "scripts": {
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

From 5aa393c77fa3ab0c588b6789d643e475cd5a2243 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 20 Jan 2026 11:56:04 +1300
Subject: [PATCH 2/3] Updated our dependencies.

---
 bun.lock                  | 8 ++++----
 package.json              | 4 ++--
 src/renderer/bun.lock     | 4 ++--
 src/renderer/package.json | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/bun.lock b/bun.lock
index 8f724d7c..72fa4a14 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,7 +5,7 @@
       "name": "@opencor/opencor",
       "dependencies": {
         "@napi-rs/keyring": "^1.2.0",
-        "@primeuix/themes": "^2.0.2",
+        "@primeuix/themes": "^2.0.3",
         "@primevue/auto-import-resolver": "4.2.5",
         "@vueuse/core": "14.1.0",
         "crypto-js": "^4.2.0",
@@ -42,7 +42,7 @@
         "stylelint-config-standard": "^40.0.0",
         "tailwindcss": "^4.1.18",
         "tailwindcss-primeui": "^0.6.1",
-        "tar": "^7.5.3",
+        "tar": "^7.5.4",
         "unplugin-vue-components": "^31.0.0",
         "vite": "7.2.7",
       },
@@ -274,7 +274,7 @@
 
     "@primeuix/styled": ["@primeuix/styled@0.7.4", "", { "dependencies": { "@primeuix/utils": "^0.6.1" } }, "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ=="],
 
-    "@primeuix/themes": ["@primeuix/themes@2.0.2", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-prwQvA3tDGBz8yWSUenaJUttEMCEvPvxwOfFhDPmSe1vwsfVKL2Nmh5eZvtPFQnxmIOPsHZS7zc0/L3CzJ83Eg=="],
+    "@primeuix/themes": ["@primeuix/themes@2.0.3", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg=="],
 
     "@primeuix/utils": ["@primeuix/utils@0.3.2", "", {}, "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw=="],
 
@@ -1216,7 +1216,7 @@
 
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
 
-    "tar": ["tar@7.5.3", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-ENg5JUHUm2rDD7IvKNFGzyElLXNjachNLp6RaGf4+JOgxXHkqA+gq81ZAMCUmtMtqBsoU62lcp6S27g1LCYGGQ=="],
+    "tar": ["tar@7.5.4", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-AN04xbWGrSTDmVwlI4/GTlIIwMFk/XEv7uL8aa57zuvRy6s4hdBed+lVq2fAZ89XDa7Us3ANXcE3Tvqvja1kTA=="],
 
     "temp": ["temp@0.9.4", "", { "dependencies": { "mkdirp": "^0.5.1", "rimraf": "~2.6.2" } }, "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA=="],
 
diff --git a/package.json b/package.json
index aa81d2d6..3053390a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@napi-rs/keyring": "^1.2.0",
-    "@primeuix/themes": "^2.0.2",
+    "@primeuix/themes": "^2.0.3",
     "@primevue/auto-import-resolver": "4.2.5",
     "@vueuse/core": "14.1.0",
     "crypto-js": "^4.2.0",
@@ -84,7 +84,7 @@
     "stylelint-config-standard": "^40.0.0",
     "tailwindcss": "^4.1.18",
     "tailwindcss-primeui": "^0.6.1",
-    "tar": "^7.5.3",
+    "tar": "^7.5.4",
     "unplugin-vue-components": "^31.0.0",
     "vite": "7.2.7"
   }
diff --git a/src/renderer/bun.lock b/src/renderer/bun.lock
index 4d56d6f5..c7d53a3c 100644
--- a/src/renderer/bun.lock
+++ b/src/renderer/bun.lock
@@ -5,7 +5,7 @@
       "name": "@opencor/opencor",
       "dependencies": {
         "@napi-rs/keyring": "^1.2.0",
-        "@primeuix/themes": "^2.0.2",
+        "@primeuix/themes": "^2.0.3",
         "@primevue/auto-import-resolver": "4.2.5",
         "@vueuse/core": "14.1.0",
         "crypto-js": "^4.2.0",
@@ -189,7 +189,7 @@
 
     "@primeuix/styled": ["@primeuix/styled@0.7.4", "", { "dependencies": { "@primeuix/utils": "^0.6.1" } }, "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ=="],
 
-    "@primeuix/themes": ["@primeuix/themes@2.0.2", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-prwQvA3tDGBz8yWSUenaJUttEMCEvPvxwOfFhDPmSe1vwsfVKL2Nmh5eZvtPFQnxmIOPsHZS7zc0/L3CzJ83Eg=="],
+    "@primeuix/themes": ["@primeuix/themes@2.0.3", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg=="],
 
     "@primeuix/utils": ["@primeuix/utils@0.3.2", "", {}, "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw=="],
 
diff --git a/src/renderer/package.json b/src/renderer/package.json
index c4932013..74533e04 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@napi-rs/keyring": "^1.2.0",
-    "@primeuix/themes": "^2.0.2",
+    "@primeuix/themes": "^2.0.3",
     "@primevue/auto-import-resolver": "4.2.5",
     "@vueuse/core": "14.1.0",
     "crypto-js": "^4.2.0",

From 9dbc15f679fc05274e7154858333fd89c8005d50 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Tue, 20 Jan 2026 12:15:24 +1300
Subject: [PATCH 3/3] OpenCOR: rely on CSS rather than manually manage the size
 of various components.

---
 src/renderer/src/common/vueCommon.ts          |  43 --
 .../src/components/ContentsComponent.vue      |  84 +---
 src/renderer/src/components/OpenCOR.vue       |  90 +---
 .../src/components/views/IssuesView.vue       |  54 +--
 .../views/SimulationExperimentView.vue        | 410 ++++++++----------
 5 files changed, 216 insertions(+), 465 deletions(-)

diff --git a/src/renderer/src/common/vueCommon.ts b/src/renderer/src/common/vueCommon.ts
index b0f6ec55..1d356770 100644
--- a/src/renderer/src/common/vueCommon.ts
+++ b/src/renderer/src/common/vueCommon.ts
@@ -67,46 +67,3 @@ export const useTheme = vueusecore.createGlobalState(() => {
     useDarkMode
   };
 });
-
-// A method to retrieve the name of a tracked CSS variable.
-
-export function trackedCssVariableName(id: string): string {
-  return `--${(id.split('_')[0] ?? '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}-height`;
-}
-
-// A method to track the height of a given element.
-
-export function trackElementHeight(id: string): ResizeObserver | undefined {
-  const element = document.getElementById(id);
-
-  if (element) {
-    const resizeObserver = new ResizeObserver(() => {
-      let elementHeight = window.getComputedStyle(element).height;
-
-      if (!elementHeight || elementHeight === 'auto') {
-        elementHeight = '0px';
-      }
-
-      const cssVariableName = trackedCssVariableName(id);
-      const oldElementHeight = document.documentElement.style.getPropertyValue(cssVariableName);
-
-      if (!oldElementHeight || (elementHeight !== '0px' && oldElementHeight !== elementHeight)) {
-        document.documentElement.style.setProperty(cssVariableName, elementHeight);
-      }
-    });
-
-    resizeObserver.observe(element);
-
-    return resizeObserver;
-  }
-
-  return undefined;
-}
-
-// A method to retrieve the value of a tracked CSS variable.
-
-export function trackedCssVariableValue(id: string): number {
-  const propertyValue = document.documentElement.style.getPropertyValue(trackedCssVariableName(id));
-
-  return propertyValue ? parseFloat(propertyValue) : 0;
-}
diff --git a/src/renderer/src/components/ContentsComponent.vue b/src/renderer/src/components/ContentsComponent.vue
index ec94c3af..edf620c5 100644
--- a/src/renderer/src/components/ContentsComponent.vue
+++ b/src/renderer/src/components/ContentsComponent.vue
@@ -1,16 +1,9 @@
 <template>
   <div v-if="simulationOnly" class="h-full">
-    <div v-for="fileTab in fileTabs" :key="`tabPanel_${fileTab.file.path()}`" :value="fileTab.file.path()">
-      <IssuesView
-        v-if="fileTab.file.issues().length"
-        :width="width"
-        :height="height"
-        :issues="fileTab.file.issues()"
+    <div v-for="fileTab in fileTabs" :key="`tabPanel_${fileTab.file.path()}`" class="h-full" :value="fileTab.file.path()">
+      <IssuesView v-if="fileTab.file.issues().length" class="h-full" :issues="fileTab.file.issues()"
       />
-      <SimulationExperimentView
-        v-else
-        :width="width"
-        :height="height"
+      <SimulationExperimentView v-else class="h-full"
         :isActive="isActive"
         :uiEnabled="uiEnabled"
         :file="fileTab.file"
@@ -20,16 +13,14 @@
       />
     </div>
   </div>
-  <div v-else class="h-full">
-    <BackgroundComponent v-show="!fileTabs.length" :style="{ height: height + 'px' }" />
-    <Tabs
-      v-show="fileTabs.length"
-      id="fileTabs"
+  <div v-else class="h-full flex flex-col">
+    <BackgroundComponent v-show="!fileTabs.length" class="h-full" />
+    <Tabs v-show="fileTabs.length" id="fileTabs" class="h-full flex flex-col"
       v-model:value="activeFile"
       :scrollable="true"
       :selectOnFocus="true"
     >
-      <TabList :id="fileTablistId" class="border-b border-b-primary">
+      <TabList :id="fileTablistId" class="border-b border-b-primary shrink-0">
         <Tab
           v-for="fileTab in fileTabs"
           :id="`tab_${fileTab.file.path()}`"
@@ -46,22 +37,15 @@
           </div>
         </Tab>
       </TabList>
-      <TabPanels class="p-0!">
-        <TabPanel
-          v-for="fileTab in fileTabs"
+      <TabPanels class="p-0! grow min-h-0">
+        <TabPanel v-for="fileTab in fileTabs" class="h-full"
           :key="`tabPanel_${fileTab.file.path()}`"
           :value="fileTab.file.path()"
         >
-          <IssuesView
-            v-if="fileTab.file.issues().length"
-            :width="width"
-            :height="heightMinusFileTablist"
+          <IssuesView v-if="fileTab.file.issues().length" class="h-full"
             :issues="fileTab.file.issues()"
           />
-          <SimulationExperimentView
-            v-else
-            :width="width"
-            :height="heightMinusFileTablist"
+          <SimulationExperimentView v-else class="h-full"
             :isActive="isActive"
             :uiEnabled="uiEnabled"
             :file="fileTab.file"
@@ -80,9 +64,7 @@ import * as vueusecore from '@vueuse/core';
 import * as vue from 'vue';
 
 import * as common from '../common/common.ts';
-import { SHORT_DELAY } from '../common/constants.ts';
 import { electronApi } from '../common/electronApi.ts';
-import * as vueCommon from '../common/vueCommon.ts';
 import * as locApi from '../libopencor/locApi.ts';
 export interface IFileTab {
   file: locApi.File;
@@ -90,8 +72,6 @@ export interface IFileTab {
 }
 
 const props = defineProps<{
-  width: number;
-  height: number;
   isActive: boolean;
   simulationOnly?: boolean;
   uiEnabled: boolean;
@@ -110,7 +90,6 @@ export interface IContentsComponent {
 const fileTablistId = vue.ref('contentsComponentFileTablist');
 const fileTabs = vue.ref<IFileTab[]>([]);
 const activeFile = vue.ref<string>('');
-const heightMinusFileTablist = vue.ref<number>(0);
 
 const filePaths = vue.computed(() => {
   const res: string[] = [];
@@ -227,47 +206,6 @@ vue.onMounted(() => {
   // Customise our IDs.
 
   fileTablistId.value = `contentsComponentFileTablist${String(crtInstance?.uid)}`;
-
-  // Track the height of our file tablist.
-
-  let fileTablistResizeObserver: ResizeObserver | undefined;
-
-  setTimeout(() => {
-    fileTablistResizeObserver = vueCommon.trackElementHeight(fileTablistId.value);
-  }, SHORT_DELAY);
-
-  // Monitor "our" contents size.
-
-  function resizeOurselves() {
-    heightMinusFileTablist.value = props.height - vueCommon.trackedCssVariableValue(fileTablistId.value);
-  }
-
-  vue.watch(
-    () => props.height,
-    () => {
-      resizeOurselves();
-    }
-  );
-
-  let oldFileTablistHeight = vueCommon.trackedCssVariableValue(fileTablistId.value);
-
-  const mutationObserver = new MutationObserver(() => {
-    const newFileTablistHeight = vueCommon.trackedCssVariableValue(fileTablistId.value);
-
-    if (newFileTablistHeight !== oldFileTablistHeight) {
-      oldFileTablistHeight = newFileTablistHeight;
-
-      resizeOurselves();
-    }
-  });
-
-  mutationObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-  vue.onUnmounted(() => {
-    mutationObserver.disconnect();
-
-    fileTablistResizeObserver?.disconnect();
-  });
 });
 
 // Keyboard shortcuts.
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index ff4f06af..abbdc244 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -1,37 +1,29 @@
 <template>
-  <BlockUI
-    ref="blockUi"
+  <BlockUI ref="blockUi" class="opencor overflow-hidden h-full"
     :blocked="compBlockUiEnabled"
-    class="opencor overflow-hidden h-full"
     @click="activateInstance"
     @focus="activateInstance"
     @focusin="activateInstance"
     @keydown="activateInstance"
     @mousedown="activateInstance"
   >
-    <Toast
-      :id="toastId"
+    <Toast :id="toastId" :class="compIsActive ? 'visible' : 'invisible'"
       :group="toastId"
       :pt:root:style="{ position: 'absolute' }"
-      :class="compIsActive ? 'visible' : 'invisible'"
     />
     <BackgroundComponent v-show="(loadingOpencorMessageVisible || loadingModelMessageVisible) && omex" />
     <BlockingMessageComponent message="Loading OpenCOR..." v-show="loadingOpencorMessageVisible" />
     <BlockingMessageComponent message="Loading model..." v-show="loadingModelMessageVisible" />
-    <IssuesView v-if="issues.length" class="h-full" :issues="issues" :width="width" :height="height" />
-    <div
-      v-else
+    <IssuesView v-if="issues.length" class="h-full" :issues="issues" />
+    <div v-else class="h-full flex flex-col"
       @dragenter="onDragEnter"
-      class="h-full"
       @dragover.prevent
       @drop.prevent="onDrop"
       @dragleave="onDragLeave"
     >
       <input ref="files" type="file" multiple style="display: none" @change="onChange" />
       <DragNDropComponent v-show="dragAndDropCounter" />
-      <MainMenu
-        :id="mainMenuId"
-        v-if="!electronApi && !omex"
+      <MainMenu :id="mainMenuId" v-if="!electronApi && !omex"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :hasFiles="hasFiles"
@@ -58,13 +50,10 @@
         />
       </div>
       -->
-      <ContentsComponent
-        ref="contents"
+      <ContentsComponent ref="contents" class="grow min-h-0"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :simulationOnly="!!omex"
-        :width="width"
-        :height="heightMinusMainMenu"
       />
       <OpenRemoteDialog
         v-model:visible="openRemoteVisible"
@@ -691,19 +680,8 @@ electronApi?.onSelect((filePath: string) => {
 
 // A few things that can only be done when the component is mounted.
 
-const width = vue.ref<number>(0);
-const height = vue.ref<number>(0);
-const heightMinusMainMenu = vue.ref<number>(0);
-
 vue.onMounted(() => {
-  // Set our height to '100vh'/'100dvh' or '100%', depending on whether we are mounted as a Vue application or a Vue
-  // component.
-
   const blockUiElement = blockUi.value?.$el as HTMLElement;
-  const parentElement = blockUiElement.parentElement;
-  const grandParentElement = parentElement?.parentElement;
-  const greatGrandParentElement = grandParentElement?.parentElement;
-  const greatGreatGrandParentElement = greatGrandParentElement?.parentElement;
 
   // Customise our IDs.
 
@@ -716,14 +694,6 @@ vue.onMounted(() => {
     activateInstance();
   }, SHORT_DELAY);
 
-  // Track the height of our main menu.
-
-  let mainMenuResizeObserver: ResizeObserver | undefined;
-
-  setTimeout(() => {
-    mainMenuResizeObserver = vueCommon.trackElementHeight(mainMenuId.value);
-  }, SHORT_DELAY);
-
   // Ensure that our toasts are shown within our block UI.
 
   setTimeout(() => {
@@ -733,54 +703,6 @@ vue.onMounted(() => {
       blockUiElement.appendChild(toastElement);
     }
   }, SHORT_DELAY);
-
-  // Monitor our size.
-  // Note: this accounts for changes in viewport size (e.g., when rotating a mobile device).
-
-  window.addEventListener('resize', resizeOurselves);
-
-  vue.onUnmounted(() => {
-    window.removeEventListener('resize', resizeOurselves);
-  });
-
-  // Monitor our contents size.
-
-  function resizeOurselves() {
-    const style = window.getComputedStyle(blockUiElement);
-
-    width.value = parseFloat(style.width);
-    height.value = parseFloat(style.height);
-
-    heightMinusMainMenu.value = height.value - vueCommon.trackedCssVariableValue(mainMenuId.value);
-  }
-
-  const resizeObserver = new ResizeObserver(() => {
-    setTimeout(() => {
-      resizeOurselves();
-    }, SHORT_DELAY);
-  });
-
-  let oldMainMenuHeight = vueCommon.trackedCssVariableValue(mainMenuId.value);
-
-  const mutationObserver = new MutationObserver(() => {
-    const newMainMenuHeight = vueCommon.trackedCssVariableValue(mainMenuId.value);
-
-    if (newMainMenuHeight !== oldMainMenuHeight) {
-      oldMainMenuHeight = newMainMenuHeight;
-
-      resizeOurselves();
-    }
-  });
-
-  resizeObserver.observe(blockUiElement);
-  mutationObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-  vue.onUnmounted(() => {
-    resizeObserver.disconnect();
-    mutationObserver.disconnect();
-
-    mainMenuResizeObserver?.disconnect();
-  });
 });
 
 // If a COMBINE archive is provided then open it (and then the Simulation Experiment view will be shown in isolation) or
diff --git a/src/renderer/src/components/views/IssuesView.vue b/src/renderer/src/components/views/IssuesView.vue
index 75ea8f25..a0ec5969 100644
--- a/src/renderer/src/components/views/IssuesView.vue
+++ b/src/renderer/src/components/views/IssuesView.vue
@@ -1,6 +1,16 @@
 <template>
-  <Fieldset :class="`${leftMargin ? 'ml-4!' : ''} ${rightMargin ? 'mr-4!' : ''}`" legend="Issues" :style="`{ width: ${fieldsetWidth}; height: ${fieldsetHeight}; }`">
-    <ScrollPanel :style="`{ width: ${width}px; height: ${scrollPanelHeight}; }`">
+  <Fieldset :class="`${leftMargin ? 'ml-4!' : ''} ${rightMargin ? 'mr-4!' : ''} issues`"
+    legend="Issues"
+    :pt="{
+      contentContainer: {
+        class: 'h-full'
+      },
+      content: {
+        class: 'h-full'
+      }
+    }"
+  >
+    <ScrollPanel class="h-full">
       <div v-for="(issue, index) in issues" :key="`issue_${index}`" :class="`select-text ${index ? 'mt-4!' : ''}`">
         <Message v-if="issue.type === locApi.EIssueType.ERROR" severity="error" icon="pi pi-times-circle">
           {{ issue.description }}
@@ -14,49 +24,23 @@
 </template>
 
 <script setup lang="ts">
-import * as vue from 'vue';
-
-import { SHORT_DELAY } from '../../common/constants.ts';
 import * as locApi from '../../libopencor/locApi.ts';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    height?: number;
     issues: locApi.IIssue[];
     leftMargin?: boolean;
     rightMargin?: boolean;
-    width?: number;
   }>(),
   {
-    height: 0,
     leftMargin: true,
-    rightMargin: true,
-    width: 0
+    rightMargin: true
   }
 );
+</script>
 
-// Resize our fieldset and scroll panel as needed.
-
-const fieldsetWidth = vue.ref<string>('');
-const fieldsetHeight = vue.ref<string>('');
-const scrollPanelHeight = vue.ref<string>('');
-
-function resizeElements() {
-  fieldsetWidth.value = props.width ? `${String(props.width)}px` : '100%';
-  fieldsetHeight.value = props.height ? `calc(${String(props.height)}px - 1rem)` : '100%';
-  scrollPanelHeight.value = props.height ? `calc(${String(props.height)}px - 4.75rem)` : '100%';
+<style scoped>
+.issues {
+  height: calc(100% - 1rem);
 }
-
-vue.onMounted(() => {
-  setTimeout(() => {
-    resizeElements();
-  }, SHORT_DELAY);
-
-  vue.watch(
-    () => [props.height],
-    () => {
-      resizeElements();
-    }
-  );
-});
-</script>
+</style>
diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue
index a96a6182..f7525668 100644
--- a/src/renderer/src/components/views/SimulationExperimentView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentView.vue
@@ -1,193 +1,195 @@
 <template>
-  <Toolbar v-if="toolbarNeeded" :id="toolbarId" class="p-1!">
-    <template #start>
-      <div :class="{ 'invisible': interactiveModeEnabled && interactiveLiveUpdatesEnabled }">
-        <Button class="p-1!" icon="pi pi-play-circle" severity="secondary" text @click="onRun()" />
-      </div>
-    </template>
-    <template #center>
-      <div v-show="interactiveModeAvailable">
-        <ToggleButton size="small" v-model="interactiveModeEnabled" onLabel="Interactive mode" offLabel="Standard mode" />
-      </div>
-    </template>
-    <template #end>
-      <div :class="{ 'invisible': !interactiveModeAvailable || !interactiveModeEnabled }" class="flex">
-        <Button class="p-1!" icon="pi pi-cog" severity="secondary" text @click="settingsMenu.toggle($event)" />
-        <Popover ref="settingsMenu">
-          <div class="flex items-center gap-2 px-1 py-1">
-            <Checkbox :inputId="liveUpdatesCheckboxId" v-model="interactiveLiveUpdatesEnabled" binary size="small" @change="onLiveUpdatesChange()" />
-            <label :for="liveUpdatesCheckboxId" class="text-sm select-none">Live updates</label>
-          </div>
-        </Popover>
-      </div>
-    </template>
-  </Toolbar>
-  <div v-show="!interactiveModeEnabled"  :style="{ width: width + 'px', height: actualHeight + 'px' }">
-    <Splitter class="border-none! h-full m-0" layout="vertical">
-      <SplitterPanel :size="simulationOnly ? 100 : 89">
-        <Splitter>
-          <SplitterPanel class="ml-4 mr-4 mb-4 min-w-fit" :size="25">
-            <ScrollPanel class="h-full">
-              <SimulationPropertyEditor :uniformTimeCourse="standardUniformTimeCourse" :instanceTask="standardInstanceTask" />
-              <!--
-                  <SolversPropertyEditor />
-                  <GraphsPropertyEditor />
-                  <ParametersPropertyEditor />
-                  -->
-              <Fieldset legend="X Axis">
-                <Select
-                  v-model="standardXParameter"
-                  editable
-                  filter
-                  filterMode="lenient"
-                  :options="standardParameters"
-                  size="small"
-                  class="w-full"
-                  @change="updatePlot()"
-                />
-              </Fieldset>
-              <Fieldset legend="Y Axis">
-                <Select
-                  v-model="standardYParameter"
-                  editable
-                  filter
-                  filterMode="lenient"
-                  :options="standardParameters"
-                  size="small"
-                  class="w-full"
-                  @change="updatePlot()"
-                />
-              </Fieldset>
-            </ScrollPanel>
-          </SplitterPanel>
-          <SplitterPanel :size="75">
-            <GraphPanelWidget
-              :key="interactiveModeEnabled ? 'hidden-graph-panel' : 'visible-graph-panel'"
-              :data="standardData"
-              :showLegend="false"
-            />
-          </SplitterPanel>
-        </Splitter>
-      </SplitterPanel>
-      <SplitterPanel v-if="!simulationOnly" :size="11">
-        <Editor :id="editorId" class="border-none h-full" :readonly="true" v-model="standardConsoleContents" />
-      </SplitterPanel>
-    </Splitter>
-  </div>
-  <div v-if="interactiveModeAvailable">
-    <div v-show="interactiveModeEnabled" class="flex" :style="{ width: width + 'px', height: actualHeight + 'px' }">
-      <IssuesView v-if="interactiveUiJsonIssues.length" class="grow" :width="width" :height="actualHeight" :issues="interactiveUiJsonIssues" />
-      <div v-else class="flex grow min-h-0">
-        <div class="ml-4 mr-4 mb-4">
-          <ScrollPanel class="h-full">
-            <Fieldset legend="Input parameters">
-              <InputWidget
-                v-for="(input, index) in uiJson.input"
-                v-model="interactiveInputValues[index]!"
-                v-show="interactiveShowInput[index]"
-                :key="`input_${index}`"
-                :name="input.name"
-                :maximumValue="locApi.isScalarInput(input) ? input.maximumValue : undefined"
-                :minimumValue="locApi.isScalarInput(input) ? input.minimumValue : undefined"
-                :possibleValues="locApi.isDiscreteInput(input) ? input.possibleValues : undefined"
-                :stepValue="locApi.isScalarInput(input) ? input.stepValue : undefined"
-                :class="index !== 0 ? 'mt-6' : ''"
-                @change="updateInteractiveSimulation()"
-              />
-            </Fieldset>
-            <Fieldset legend="Runs">
-              <div class="flex flex-col gap-4">
-                <div class="flex gap-2">
-                  <Button class="grow"
-                    icon="pi pi-plus"
-                    label="Add run"
+  <div class="h-full flex flex-col">
+    <Toolbar v-if="toolbarNeeded" :id="toolbarId" class="p-1! shrink-0">
+      <template #start>
+        <div :class="{ 'invisible': interactiveModeEnabled && interactiveLiveUpdatesEnabled }">
+          <Button class="p-1!" icon="pi pi-play-circle" severity="secondary" text @click="onRun()" />
+        </div>
+      </template>
+      <template #center>
+        <div v-show="interactiveModeAvailable">
+          <ToggleButton size="small" v-model="interactiveModeEnabled" onLabel="Interactive mode" offLabel="Standard mode" />
+        </div>
+      </template>
+      <template #end>
+        <div :class="{ 'invisible': !interactiveModeAvailable || !interactiveModeEnabled }" class="flex">
+          <Button class="p-1!" icon="pi pi-cog" severity="secondary" text @click="settingsMenu.toggle($event)" />
+          <Popover ref="settingsMenu">
+            <div class="flex items-center gap-2 px-1 py-1">
+              <Checkbox :inputId="liveUpdatesCheckboxId" v-model="interactiveLiveUpdatesEnabled" binary size="small" @change="onLiveUpdatesChange()" />
+              <label :for="liveUpdatesCheckboxId" class="text-sm select-none">Live updates</label>
+            </div>
+          </Popover>
+        </div>
+      </template>
+    </Toolbar>
+    <div v-show="!interactiveModeEnabled" class="grow min-h-0">
+      <Splitter class="border-none! h-full m-0" layout="vertical">
+        <SplitterPanel :size="simulationOnly ? 100 : 89">
+          <Splitter>
+            <SplitterPanel class="ml-4 mr-4 mb-4 min-w-fit" :size="25">
+              <ScrollPanel class="h-full">
+                <SimulationPropertyEditor :uniformTimeCourse="standardUniformTimeCourse" :instanceTask="standardInstanceTask" />
+                <!--
+                    <SolversPropertyEditor />
+                    <GraphsPropertyEditor />
+                    <ParametersPropertyEditor />
+                    -->
+                <Fieldset legend="X Axis">
+                  <Select
+                    v-model="standardXParameter"
+                    editable
+                    filter
+                    filterMode="lenient"
+                    :options="standardParameters"
                     size="small"
-                    @click="onAddRun()"
+                    class="w-full"
+                    @change="updatePlot()"
                   />
-                  <Button class="w-9!"
-                    icon="pi pi-refresh"
+                </Fieldset>
+                <Fieldset legend="Y Axis">
+                  <Select
+                    v-model="standardYParameter"
+                    editable
+                    filter
+                    filterMode="lenient"
+                    :options="standardParameters"
                     size="small"
-                    severity="danger"
-                    title="Remove all runs"
-                    @click="onRemoveAllRuns()"
-                    :disabled="interactiveRuns.length === 1"
+                    class="w-full"
+                    @change="updatePlot()"
                   />
-                </div>
-                <div class="flex flex-col gap-2">
-                  <div v-for="(run, index) in interactiveRuns"
-                    :key="`run_${index}`"
-                    class="run border border-dashed rounded pl-2 pr-1.5 py-1"
-                  >
-                    <div class="flex items-center">
-                      <div class="grow text-sm"
-                        :class="{ 'cursor-help': !run.isLiveRun }"
-                        v-tippy:bottom="!run.isLiveRun ? {
-                          allowHTML: true,
-                          content: run.tooltip,
-                          placement: 'bottom'
-                        } : undefined"
-                      >
-                        {{ run.isLiveRun ? 'Live run' : `Run #${index}` }}
-                      </div>
-                      <div>
+                </Fieldset>
+              </ScrollPanel>
+            </SplitterPanel>
+            <SplitterPanel :size="75">
+              <GraphPanelWidget
+                :key="interactiveModeEnabled ? 'hidden-graph-panel' : 'visible-graph-panel'"
+                :data="standardData"
+                :showLegend="false"
+              />
+            </SplitterPanel>
+          </Splitter>
+        </SplitterPanel>
+        <SplitterPanel v-if="!simulationOnly" :size="11">
+          <Editor :id="editorId" class="border-none h-full" :readonly="true" v-model="standardConsoleContents" />
+        </SplitterPanel>
+      </Splitter>
+    </div>
+    <div v-if="interactiveModeAvailable" class="grow min-h-0">
+      <div v-show="interactiveModeEnabled" class="flex h-full">
+        <IssuesView v-if="interactiveUiJsonIssues.length" class="grow h-full" :issues="interactiveUiJsonIssues" />
+        <div v-else class="flex grow min-h-0">
+          <div class="ml-4 mr-4 mb-4">
+            <ScrollPanel class="h-full">
+              <Fieldset legend="Input parameters">
+                <InputWidget
+                  v-for="(input, index) in uiJson.input"
+                  v-model="interactiveInputValues[index]!"
+                  v-show="interactiveShowInput[index]"
+                  :key="`input_${index}`"
+                  :name="input.name"
+                  :maximumValue="locApi.isScalarInput(input) ? input.maximumValue : undefined"
+                  :minimumValue="locApi.isScalarInput(input) ? input.minimumValue : undefined"
+                  :possibleValues="locApi.isDiscreteInput(input) ? input.possibleValues : undefined"
+                  :stepValue="locApi.isScalarInput(input) ? input.stepValue : undefined"
+                  :class="index !== 0 ? 'mt-6' : ''"
+                  @change="updateInteractiveSimulation()"
+                />
+              </Fieldset>
+              <Fieldset legend="Runs">
+                <div class="flex flex-col gap-4">
+                  <div class="flex gap-2">
+                    <Button class="grow"
+                      icon="pi pi-plus"
+                      label="Add run"
+                      size="small"
+                      @click="onAddRun()"
+                    />
+                    <Button class="w-9!"
+                      icon="pi pi-refresh"
+                      size="small"
+                      severity="danger"
+                      title="Remove all runs"
+                      @click="onRemoveAllRuns()"
+                      :disabled="interactiveRuns.length === 1"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-2">
+                    <div v-for="(run, index) in interactiveRuns"
+                      :key="`run_${index}`"
+                      class="run border border-dashed rounded pl-2 pr-1.5 py-1"
+                    >
+                      <div class="flex items-center">
+                        <div class="grow text-sm"
+                          :class="{ 'cursor-help': !run.isLiveRun }"
+                          v-tippy:bottom="!run.isLiveRun ? {
+                            allowHTML: true,
+                            content: run.tooltip,
+                            placement: 'bottom'
+                          } : undefined"
+                        >
+                          {{ run.isLiveRun ? 'Live run' : `Run #${index}` }}
+                        </div>
+                        <div>
+                          <Button class="p-0! w-5! h-5!"
+                            icon="pi pi-wave-pulse"
+                            :style="{ color: run.color }"
+                            text size="small"
+                            :title="`Change ${run.isLiveRun ? 'live run' : 'run'} colour`"
+                            @click="onToggleRunColorPopover(index, $event)"
+                          />
+                          <Popover :ref="(element) => interactiveRunColorPopoverRefs[index] = element as unknown as IPopover | undefined"
+                            v-if="interactiveRunColorPopoverIndex === index"
+                          >
+                            <div class="flex gap-2">
+                              <button class="cursor-pointer w-6 h-6 rounded"
+                                v-for="color in GraphPanelWidgetPalette" :key="color"
+                                :style="{ backgroundColor: color }"
+                                :class="{ 'selected-color': color === run.color }"
+                                @click="onRunColorChange(index, color)"
+                              >
+                              </button>
+                            </div>
+                          </Popover>
+                        </div>
                         <Button class="p-0! w-5! h-5!"
-                          icon="pi pi-wave-pulse"
-                          :style="{ color: run.color }"
+                          :icon="run.visible ? 'pi pi-eye' : 'pi pi-eye-slash'"
+                          :severity="run.visible ? 'info' : 'secondary'"
                           text size="small"
-                          :title="`Change ${run.isLiveRun ? 'live run' : 'run'} colour`"
-                          @click="onToggleRunColorPopover(index, $event)"
+                          :title="`${run.visible ? 'Hide' : 'Show'} ${run.isLiveRun ? 'live run' : 'run'}`"
+                          @click="onToggleRun(index)"
                         />
-                        <Popover :ref="(element) => interactiveRunColorPopoverRefs[index] = element as unknown as IPopover | undefined"
-                          v-if="interactiveRunColorPopoverIndex === index"
-                        >
-                          <div class="flex gap-2">
-                            <button class="cursor-pointer w-6 h-6 rounded"
-                              v-for="color in GraphPanelWidgetPalette" :key="color"
-                              :style="{ backgroundColor: color }"
-                              :class="{ 'selected-color': color === run.color }"
-                              @click="onRunColorChange(index, color)"
-                            >
-                            </button>
-                          </div>
-                        </Popover>
+                        <Button v-if="!run.isLiveRun" class="p-0! w-5! h-5!"
+                          icon="pi pi-trash"
+                          severity="danger"
+                          text size="small"
+                          title="Remove run"
+                          @click="onRemoveRun(index)"
+                        />
+                        <div v-else class="w-5 h-5"></div>
                       </div>
-                      <Button class="p-0! w-5! h-5!"
-                        :icon="run.visible ? 'pi pi-eye' : 'pi pi-eye-slash'"
-                        :severity="run.visible ? 'info' : 'secondary'"
-                        text size="small"
-                        :title="`${run.visible ? 'Hide' : 'Show'} ${run.isLiveRun ? 'live run' : 'run'}`"
-                        @click="onToggleRun(index)"
-                      />
-                      <Button v-if="!run.isLiveRun" class="p-0! w-5! h-5!"
-                        icon="pi pi-trash"
-                        severity="danger"
-                        text size="small"
-                        title="Remove run"
-                        @click="onRemoveRun(index)"
-                      />
-                      <div v-else class="w-5 h-5"></div>
                     </div>
-                  </div>
-                  <div v-if="interactiveRuns.length === 1" class="hint text-center text-xs">
-                    There are no (additional) runs.<br/>
-                    Click "Add run" to add one.
+                    <div v-if="interactiveRuns.length === 1" class="hint text-center text-xs">
+                      There are no (additional) runs.<br/>
+                      Click "Add run" to add one.
+                    </div>
                   </div>
                 </div>
-              </div>
-            </Fieldset>
-          </ScrollPanel>
-        </div>
-        <div class="flex flex-col grow gap-2 h-full min-h-0">
-          <IssuesView v-show="interactiveInstanceIssues.length" :leftMargin="false" :width="width" :height="actualHeight" :issues="interactiveInstanceIssues" />
-          <GraphPanelWidget v-show="!interactiveInstanceIssues.length"
-            v-for="(_plot, index) in uiJson.output.plots"
-            :key="`plot_${index}`"
-            class="w-full min-h-0"
-            :margins="interactiveCompMargins"
-            :data="interactiveCompData[index] || { traces: [] }"
-            @marginsUpdated="(newMargins: IGraphPanelMargins) => onMarginsUpdated(`plot_${index}`, newMargins)"
-            @resetMargins="() => onResetMargins()"
-          />
+              </Fieldset>
+            </ScrollPanel>
+          </div>
+          <div class="flex flex-col grow gap-2 h-full min-h-0">
+            <IssuesView v-show="interactiveInstanceIssues.length" class="h-full" :leftMargin="false" :issues="interactiveInstanceIssues" />
+            <GraphPanelWidget v-show="!interactiveInstanceIssues.length"
+              v-for="(_plot, index) in uiJson.output.plots"
+              :key="`plot_${index}`"
+              class="w-full min-h-0"
+              :margins="interactiveCompMargins"
+              :data="interactiveCompData[index] || { traces: [] }"
+              @marginsUpdated="(newMargins: IGraphPanelMargins) => onMarginsUpdated(`plot_${index}`, newMargins)"
+              @resetMargins="() => onResetMargins()"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -202,9 +204,7 @@ import * as vueusecore from '@vueuse/core';
 import * as vue from 'vue';
 
 import * as common from '../../common/common.ts';
-import { SHORT_DELAY } from '../../common/constants.ts';
 import * as locCommon from '../../common/locCommon.ts';
-import * as vueCommon from '../../common/vueCommon.ts';
 import * as locApi from '../../libopencor/locApi.ts';
 import * as locSedApi from '../../libopencor/locSedApi.ts';
 
@@ -222,13 +222,11 @@ interface ISimulationRun {
 
 const props = defineProps<{
   file: locApi.File;
-  height: number;
   isActive: boolean;
   isActiveFile: boolean;
   simulationOnly?: boolean;
   uiEnabled: boolean;
   uiJson: locApi.IUiJson;
-  width: number;
 }>();
 
 const toolbarNeeded = vue.computed(() => {
@@ -242,7 +240,6 @@ const toolbarNeeded = vue.computed(() => {
 const toolbarId = vue.ref('simulationExperimentViewToolbar');
 const editorId = vue.ref('simulationExperimentViewEditor');
 const liveUpdatesCheckboxId = vue.ref('simulationExperimentViewLiveUpdatesCheckbox');
-const actualHeight = vue.ref<number>(0);
 const interactiveModeAvailable = vue.ref<boolean>(!!props.uiJson);
 const interactiveModeEnabled = vue.ref<boolean>(!!props.uiJson);
 const interactiveLiveUpdatesEnabled = vue.ref<boolean>(true);
@@ -758,45 +755,6 @@ vue.onMounted(() => {
   editorId.value = `simulationExperimentViewEditor${String(crtInstance?.uid)}`;
   liveUpdatesCheckboxId.value = `simulationExperimentViewLiveUpdatesCheckbox${String(crtInstance?.uid)}`;
 
-  // Track the height of our toolbar.
-
-  let toolbarResizeObserver: ResizeObserver | undefined;
-
-  setTimeout(() => {
-    toolbarResizeObserver = vueCommon.trackElementHeight(toolbarId.value);
-  }, SHORT_DELAY);
-
-  // Monitor "our" contents size.
-
-  function resizeOurselves() {
-    actualHeight.value = props.height - (toolbarNeeded.value ? vueCommon.trackedCssVariableValue(toolbarId.value) : 0);
-  }
-
-  vue.nextTick(() => {
-    resizeOurselves();
-  });
-
-  vue.watch(
-    () => props.height,
-    () => {
-      resizeOurselves();
-    }
-  );
-
-  let oldToolbarHeight = vueCommon.trackedCssVariableValue(toolbarId.value);
-
-  const mutationObserver = new MutationObserver(() => {
-    const newToolbarHeight = vueCommon.trackedCssVariableValue(toolbarId.value);
-
-    if (newToolbarHeight !== oldToolbarHeight) {
-      oldToolbarHeight = newToolbarHeight;
-
-      resizeOurselves();
-    }
-  });
-
-  mutationObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
   // Make sure that our active popover gets hidden when the window loses focus.
 
   vue.watch(
@@ -811,14 +769,6 @@ vue.onMounted(() => {
       }
     }
   );
-
-  // Disconnect our observers when unmounting.
-
-  vue.onUnmounted(() => {
-    mutationObserver.disconnect();
-
-    toolbarResizeObserver?.disconnect();
-  });
 });
 
 // Keyboard shortcuts.