Improve support for hosting apps

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260612.2",
+  "version": "0.20260612.3",
   "engines": {
     "bun": ">=1.2.0"
   },

src/renderer/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260612.2",
+  "version": "0.20260612.3",
   "libopencorVersion": "0.20260604.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",

src/renderer/src/common/vueCommon.ts

@@ -100,8 +100,11 @@ export const trackElementHeight = (
   return stopTrackingElementHeight;
 };
 
-// Teleport the target inside `.opencor` so that it is visible in full-screen mode and not affected by PrimeVue's
-// `absolutePosition()` adding scroll offsets.
+// Create a `position: fixed` overlay container inside `.opencor` to serve as PrimeVue's append target. This keeps
+// overlays visible in full-screen mode and counters PrimeVue's `absolutePosition()` which adds `windowScrollTop/Left`
+// to viewport-relative coordinates. The `getBoundingClientRect()`-based correction handles both plain scroll offsets
+// and cases where CSS ancestors (transform/will-change/filter/perspective) create new containing blocks for
+// `position: fixed`.
 
 export const useAppendTarget = () => {
   const appendTarget = vue.shallowRef<HTMLElement | undefined>(undefined);
@@ -124,7 +127,7 @@ export const useAppendTarget = () => {
 
         overlayContainer.className = containerClass;
         overlayContainer.style.cssText =
-          'position: fixed; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 99999;';
+          'position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 99999;';
 
         // Restore pointer events for overlay content teleported into the container.
 
@@ -134,17 +137,25 @@ export const useAppendTarget = () => {
           })
         );
 
+        opencor.appendChild(overlayContainer);
+
         const container = overlayContainer;
         const updateScrollOffset = () => {
-          container.style.top = `-${window.scrollY}px`;
-          container.style.left = `-${window.scrollX}px`;
+          const rect = container.getBoundingClientRect();
+          const oldTop = parseFloat(container.style.top) || 0;
+          const oldLeft = parseFloat(container.style.left) || 0;
+          const newTop = oldTop - rect.top - window.scrollY;
+          const newLeft = oldLeft - rect.left - window.scrollX;
+
+          if (Math.abs(newTop - oldTop) >= 0.5 || Math.abs(newLeft - oldLeft) >= 0.5) {
+            container.style.top = `${newTop}px`;
+            container.style.left = `${newLeft}px`;
+          }
         };
 
         updateScrollOffset();
 
         window.addEventListener('scroll', updateScrollOffset, { passive: true });
-
-        opencor.appendChild(overlayContainer);
       }
 
       appendTarget.value = overlayContainer;

src/renderer/src/components/widgets/TooltipWidget.vue

@@ -2,7 +2,7 @@
   <div ref="wrapperRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
     <slot />
     <Popover ref="popoverRef" class="tooltip" :appendTo="appendTarget" :closeOnEscape="false">
-      <div class="tooltip" v-html="content" />
+      <div class="tooltip-content" v-html="content" />
     </Popover>
   </div>
 </template>
@@ -38,21 +38,46 @@ const onMouseLeave = () => {
 .tooltip {
   width: max-content;
   max-width: 20rem;
+}
+</style>
+
+<style>
+.tooltip .p-popover-content {
+  padding: 0.375rem 0.625rem;
+}
+
+/* Styles for teleported v-html content.
+ * Note: they must be global since scoped styles do not survive PrimeVue's Popover teleportation. Scoped under
+ *       `.opencor` to prevent leaking into host apps that may have their own .tooltip-content class.
+ */
+
+.opencor .tooltip-content {
+  width: max-content;
+  max-width: 20rem;
   font-size: 0.8rem;
 }
 
-.tooltip :deep(code) {
+.opencor .tooltip-content code {
   font-size: 0.85em;
   padding: 0.1em 0.25em;
   background-color: var(--p-form-field-background);
   color: var(--p-form-field-color);
   border: 1px solid var(--p-form-field-border-color);
   border-radius: 0.2em;
 }
-</style>
 
-<style>
-.tooltip .p-popover-content {
-  padding: 0.375rem 0.625rem;
+.opencor .tooltip-content b,
+.opencor .tooltip-content strong {
+  font-weight: 600;
+}
+
+.opencor .tooltip-content em,
+.opencor .tooltip-content i {
+  font-style: italic;
+}
+
+.opencor .tooltip-content sub {
+  vertical-align: sub;
+  font-size: smaller;
 }
 </style>