fix(editor): create portal for monaco overflow widgets (#67)

Author: farnabaz

src/app/src/components/AppLayout.vue

@@ -49,9 +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"
     >
+      <!-- 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">

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',