From 4bba218e26fb345056ac3765d3e7909049dd6799 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 16 Apr 2025 15:02:13 +0200
Subject: [PATCH] better match to monaco

---
 frontend/src/lib/components/Editor.svelte          | 14 ++++++++------
 .../lib/components/FakeMonacoPlaceHolder.svelte    | 13 +++++++------
 frontend/src/lib/components/SimpleEditor.svelte    |  4 +---
 frontend/src/lib/components/TemplateEditor.svelte  |  2 +-
 .../flows/content/FlowModuleComponent.svelte       |  2 +-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 1105c6d25f..49b716de1b 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -1416,12 +1416,14 @@
 
 <EditorTheme />
 {#if !editor}
-	<FakeMonacoPlaceHolder
-		marginLeft="51px"
-		{code}
-		fontSize={!small ? 14 : 12}
-		className="dark:bg-[#272D38] h-full"
-	/>
+	<div class="inset-0 absolute overflow-clip">
+		<FakeMonacoPlaceHolder
+			marginLeft="51px"
+			{code}
+			fontSize={!small ? 14 : 12}
+			className="dark:bg-[#272D38] h-full"
+		/>
+	</div>
 {/if}
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}"></div>
 {#if $vimMode}
diff --git a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
index 10e78772f2..e0e96c6059 100644
--- a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
+++ b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
@@ -8,20 +8,21 @@
 		className?: string
 	}
 
-	let { code, fontSize, marginLeft = '23px', className = '' }: Props = $props()
+	let { code, fontSize, marginLeft = '1.44em', className = '' }: Props = $props()
 </script>
 
 <div
-	class={'w-full pr-14 z-9 mt-[-1px] mb-[1px] leading-5 overflow-x-auto mycontainer ' + className}
+	class={'relative w-full pr-14 z-9 mt-[-0.026em] mb-[0.026em] leading-5 overflow-y-clip overflow-x-auto mycontainer ' +
+		className}
 	style="padding-left: {marginLeft};"
 >
 	<div
-		class="absolute inset-x-0 h-[1.36rem] bg-[#3A4252] mix-blend-lighten"
+		class="absolute inset-x-0 h-[1.36em] dark:bg-[#3A4252] mix-blend-lighten"
 		style="margin-left: {marginLeft};"
 	></div>
 	<code
-		class="text-nowrap whitespace-pre-wrap text-ellipsis overflow-clip text-tertiary"
-		style="font-size: {fontSize}px;"
+		class="text-nowrap whitespace-pre-wrap text-ellipsis overflow-clip text-tertiary/50"
+		style="font-size: {fontSize / 16}em;"
 	>
 		{code}
 	</code>
@@ -30,7 +31,7 @@
 <style>
 	.mycontainer::-webkit-scrollbar {
 		/* Try to match monaco's scrollbar */
-		height: 12px;
+		height: 0.75px;
 	}
 	.mycontainer::-webkit-scrollbar-thumb {
 		background-color: transparent;
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index a8ac8bdbe5..886ad3c1c9 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -516,9 +516,7 @@
 				mounted = true
 				await loadMonaco()
 				if (autofocus) {
-					setTimeout(() => {
-						focus()
-					}, 0)
+					setTimeout(() => focus(), 0)
 				}
 			}
 		}, 0)
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index f5783bf3f0..0d9621973a 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -637,7 +637,7 @@
 	style="height: 18px;"
 	class="{$$props.class ??
 		''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor
-		? 'absolute'
+		? 'hidden'
 		: ''}"
 	bind:clientWidth={width}
 ></div>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 41922fb311..139223cb1c 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -358,7 +358,7 @@
 
 				<div class="min-h-0 flex-grow" id="flow-editor-editor">
 					<Splitpanes horizontal>
-						<Pane bind:size={editorPanelSize} minSize={10}>
+						<Pane bind:size={editorPanelSize} minSize={10} class="relative">
 							{#if flowModule.value.type === 'rawscript'}
 								{#if !noEditor}
 									{#key flowModule.id}