Fix blocking messages and dialogs centering

Author: akhuoa

src/renderer/src/components/OpenCOR.vue

@@ -1,5 +1,7 @@
 <template>
-  <BlockUI ref="blockUi" class="opencor overflow-hidden h-full"
+  <BlockUI ref="blockUi"
+    class="opencor overflow-hidden h-full"
+    :class="showMainMenu ? 'with-main-menu' : ''"
     :blocked="compBlockUiEnabled"
     @click="activateInstance"
     @focus="activateInstance"
@@ -21,7 +23,7 @@
     >
       <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="showMainMenu"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :hasFiles="hasFiles"
@@ -159,6 +161,10 @@ const compIsActive = vue.computed(() => {
   return activeInstanceUid.value === crtInstanceUid;
 });
 
+const showMainMenu = vue.computed(() => {
+  return !electronApi && !props.omex;
+});
+
 // Determine whether the component UI should be blocked/enabled.
 // Note: compBlockUiEnabled is used to determine whether PrimeVue's BlockUI component should be enabled, whereas
 //       compUiEnabled is used to determine whether the UI should be enabled (it checks whether various dialogs are
@@ -1229,6 +1235,15 @@ const onGitHubButtonClick = async (): Promise<void> => {
   color: var(--p-red-700);
 }
 
+.with-main-menu {
+  :deep(.p-dialog-mask) {
+    padding-top: 28px !important;
+  }
+  :deep(.p-message) {
+    margin-top: 14px !important;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .connected-to-github,
   :deep(.connected-to-github .pi-github) {