From 2ccc465918d12135396719d7d06cb15ea52ae8fd Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 6 Nov 2025 16:22:31 +0100
Subject: [PATCH 1/2] fix(editor): create portal for monaco overflow widgets

---
 src/app/src/components/AppLayout.vue | 7 +++++--
 src/app/src/composables/useMonaco.ts | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/src/components/AppLayout.vue b/src/app/src/components/AppLayout.vue
index 9350f6ed..cf286903 100644
--- a/src/app/src/components/AppLayout.vue
+++ b/src/app/src/components/AppLayout.vue
@@ -49,11 +49,14 @@ function onLeave(el: Element, done: () => void) {
   >
     <div
       v-if="open"
-      class="fixed top-0 bottom-0 left-0 overflow-y-auto border-r border-default flex flex-col max-w-full bg-default"
+      class="fixed top-0 bottom-0 left-0 border-r border-default flex flex-col max-w-full bg-default"
       :style="sidebarStyle"
     >
-      <AppHeader />
+    <!-- This is needed for the Monaco editor to be able to position the portal correctly -->
+    <div class="monaco-editor"><div id="monaco-portal" /></div>
 
+    <AppHeader />
+    
       <div class="flex-1 overflow-y-auto relative">
         <slot />
       </div>
diff --git a/src/app/src/composables/useMonaco.ts b/src/app/src/composables/useMonaco.ts
index 6c1bbfd7..313f1df9 100644
--- a/src/app/src/composables/useMonaco.ts
+++ b/src/app/src/composables/useMonaco.ts
@@ -35,12 +35,19 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
 
     const colorMode = unref(options.colorMode) || 'dark'
 
+    const monacoPortal = (el.getRootNode() as Document)?.getElementById('monaco-portal') || undefined
+    if (monacoPortal) {
+      monacoPortal.style.position = 'absolute'
+      monacoPortal.style.top = el.getClientRects()[0].top + 'px'
+    }
+
     // Create editor instance (use the custom createEditor wrapper from setupMonaco)
     editor.value = monaco.createEditor(el, {
       theme: getTheme(colorMode),
       lineNumbers: 'off',
       readOnly: options.readOnly ?? false,
       wordWrap: 'on',
+      overflowWidgetsDomNode: monacoPortal,
       scrollbar: options.readOnly
         ? {
             vertical: 'hidden',

From 77c5c84cc4ad7fde9fb47d53d767dbd4574c9785 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 6 Nov 2025 16:23:46 +0100
Subject: [PATCH 2/2] lint: fix

---
 src/app/src/components/AppLayout.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/src/components/AppLayout.vue b/src/app/src/components/AppLayout.vue
index cf286903..97f36984 100644
--- a/src/app/src/components/AppLayout.vue
+++ b/src/app/src/components/AppLayout.vue
@@ -52,11 +52,13 @@ function onLeave(el: Element, done: () => void) {
       class="fixed top-0 bottom-0 left-0 border-r border-default flex flex-col max-w-full bg-default"
       :style="sidebarStyle"
     >
-    <!-- This is needed for the Monaco editor to be able to position the portal correctly -->
-    <div class="monaco-editor"><div id="monaco-portal" /></div>
+      <!-- This is needed for the Monaco editor to be able to position the portal correctly -->
+      <div class="monaco-editor">
+        <div id="monaco-portal" />
+      </div>
+
+      <AppHeader />
 
-    <AppHeader />
-    
       <div class="flex-1 overflow-y-auto relative">
         <slot />
       </div>