fix editor popover for apps

frontend/src/lib/components/Editor.svelte

@@ -65,6 +65,7 @@
 	export let automaticLayout = true
 	export let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 	export let shouldBindKey: boolean = true
+	export let fixedOverflowWidgets = true
 
 	let websockets: [MonacoLanguageClient, WebSocket][] = []
 	let websocketInterval: NodeJS.Timer | undefined
@@ -399,7 +400,7 @@
 		model.updateOptions(updateOptions)
 		editor = monaco.editor.create(
 			divEl as HTMLDivElement,
-			editorConfig(model, code, lang, automaticLayout)
+			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
 		)
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined

frontend/src/lib/components/ScriptEditor.svelte

@@ -24,6 +24,7 @@
 	export let path: string | undefined
 	export let lang: Preview.language
 	export let initialArgs: Record<string, any> = {}
+	export let fixedOverflowWidgets = true
 
 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 
@@ -134,10 +135,10 @@
 		</div>
 	</div>
 </div>
-<SplitPanesWrapper>
-	<Pane size={60} minSize={10}>
+<SplitPanesWrapper panesClass="!overflow-visible">
+	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full"
+			class="p-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}
@@ -156,9 +157,10 @@
 					localStorage.setItem(path ?? 'last_save', code)
 					lastSave = code
 				}}
-				class="flex flex-1 h-full"
+				class="flex flex-1 h-full !overflow-visible"
 				lang={scriptLangToEditorLang(lang)}
 				automaticLayout={true}
+				{fixedOverflowWidgets}
 			/>
 		</div>
 	</Pane>

frontend/src/lib/components/SimpleEditor.svelte

@@ -107,7 +107,7 @@
 
 		editor = monaco.editor.create(
 			divEl as HTMLDivElement,
-			editorConfig(model, code, lang, automaticLayout)
+			editorConfig(model, code, lang, automaticLayout, true)
 		)
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -95,10 +95,11 @@
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:this={scriptEditorDrawer} size="1000px">
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
 	<DrawerContent
 		title="Script Editor"
 		noPadding
+		forceOverflowVisible
 		on:close={() => {
 			scriptEditorDrawer.closeDrawer()
 		}}
@@ -109,6 +110,7 @@
 				bind:code={selectedScript.content}
 				path={selectedScript.path}
 				bind:schema={selectedScript.schema}
+				fixedOverflowWidgets={false}
 			/>
 		{/if}
 	</DrawerContent>

frontend/src/lib/components/common/drawer/DrawerContent.svelte

@@ -7,6 +7,7 @@
 	export let title: string | undefined = undefined
 	export let overflow_y = true
 	export let noPadding = false
+	export let forceOverflowVisible = false
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -32,7 +33,9 @@
 	</div>
 
 	<div
-		class="{noPadding ? '' : 'py-2 px-6'} grow h-full max-h-full"
+		class="{noPadding ? '' : 'py-2 px-6'} grow h-full max-h-full {forceOverflowVisible
+			? '!overflow-visible'
+			: ''}"
 		class:overflow-y-auto={overflow_y}
 	>
 		<slot />

frontend/src/lib/editorUtils.ts

@@ -1,13 +1,13 @@
 
 
-export function editorConfig(model: any, code: string, lang: string, automaticLayout: boolean) {
+export function editorConfig(model: any, code: string, lang: string, automaticLayout: boolean, fixedOverflowWidgets: boolean) {
     return {
         model,
         value: code,
         language: lang,
         automaticLayout,
         readOnly: false,
-        fixedOverflowWidgets: true,
+        fixedOverflowWidgets,
         autoDetectHighContrast: true,
         //lineNumbers: 'off',
         //lineDecorationsWidth: 0,