From 07bbccbf8319e3ac4ef302f9d47005d876b70129 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 28 Nov 2022 20:55:39 +0100
Subject: [PATCH] fix editor popover for apps

---
 frontend/src/lib/components/Editor.svelte              |  3 ++-
 frontend/src/lib/components/ScriptEditor.svelte        | 10 ++++++----
 frontend/src/lib/components/SimpleEditor.svelte        |  2 +-
 .../apps/editor/contextPanel/ContextPanel.svelte       |  4 +++-
 .../lib/components/common/drawer/DrawerContent.svelte  |  5 ++++-
 frontend/src/lib/editorUtils.ts                        |  4 ++--
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 4ec6f51c07..451087959d 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/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
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index bff3cf1778..baeafa0398 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 7cf0ddaa6d..239f85d0b6 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/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
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 6dcd71e813..b41353b9cd 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 322764bcee..d35107a8ae 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/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 />
diff --git a/frontend/src/lib/editorUtils.ts b/frontend/src/lib/editorUtils.ts
index 35f903fd6f..70c0c4e761 100644
--- a/frontend/src/lib/editorUtils.ts
+++ b/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,