editor styling

frontend/src/lib/components/Editor.svelte

@@ -11,6 +11,16 @@
 		noSuggestionDiagnostics: true,
 		noSyntaxValidation: true
 	})
+	monaco.editor.defineTheme('myTheme', {
+		base: 'vs',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editorLineNumber.foreground': '#999',
+			'editorGutter.background': '#F9FAFB'
+		}
+	})
+	monaco.editor.setTheme('myTheme')
 </script>
 
 <script lang="ts">
@@ -485,12 +495,10 @@
 	})
 </script>
 
-<div bind:this={divEl} class={$$props.class} />
+<div bind:this={divEl} class="{$$props.class} editor" />
 
 <style>
 	.editor {
-		@apply px-0;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
+		@apply p-0 border rounded-md border-gray-50;
 	}
 </style>

frontend/src/lib/components/InputTransformForm.svelte

@@ -239,7 +239,7 @@
 				bind:pickForField
 			/>
 		{:else if arg.expr != undefined}
-			<div class="border rounded p-2 mt-2 border-gray-300">
+			<div class="border rounded mt-2 border-gray-300">
 				<SimpleEditor
 					bind:this={monaco}
 					bind:code={arg.expr}

frontend/src/lib/components/SchemaEditor.svelte

@@ -183,7 +183,7 @@
 	</div>
 
 	<!--json schema or table view-->
-	<div class="h-full overflow-y-auto">
+	<div class="h-full">
 		{#if !viewJsonSchema}
 			<div class="h-full">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}

frontend/src/lib/components/ScriptEditor.svelte

@@ -140,7 +140,7 @@
 <SplitPanesWrapper panesClass="!overflow-visible">
 	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full !overflow-visible"
+			class="pl-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}

frontend/src/lib/components/SimpleEditor.svelte

@@ -182,13 +182,11 @@
 	})
 </script>
 
-<div bind:this={divEl} class={$$props.class} bind:clientWidth={width} />
+<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
 
 <style>
 	.editor {
-		@apply px-0;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
+		@apply rounded-lg p-0;
 	}
 
 	.small-editor {

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -144,7 +144,7 @@
 			</svelte:fragment>
 
 			{#if value.type === 'rawscript'}
-				<div class="border-b-2 shadow-sm px-1 mb-1">
+				<div class="border-b-2 shadow-sm px-1">
 					<EditorBar
 						{validCode}
 						{editor}