Editor Sizing

src/lib/Card/index.svelte

@@ -1,4 +1,4 @@
-<div class={`bg-white m-2 rounded overflow-hidden shadow flex flex-col ${$$props.class}`}>
+<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col ${$$props.class}`}>
 	<div class="bg-blue-400 border-gray-400 p-2 flex-none">
 		<slot name="title" />
 	</div>

src/lib/Editor/index.svelte

@@ -16,7 +16,12 @@
 	export let language: string;
 	export let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 		value: text,
-		language: language
+		language: language,
+		scrollBeyondLastLine: false,
+		minimap: {
+			enabled: false
+		},
+		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: Monaco?.editor.setModelLanguage(editor.getModel(), language);
@@ -57,11 +62,21 @@
 				text: editor.getValue()
 			});
 		});
-		// editor.layout();
+		editor.layout({
+			height: divEl.parentElement.offsetHeight,
+			width: divEl.parentElement.offsetWidth
+		});
+		const resizeObserver = new ResizeObserver((entries) => {
+			editor.layout({
+				height: entries[0].contentRect.height,
+				width: entries[0].contentRect.width
+			});
+		});
+		resizeObserver.observe(divEl);
 		return () => {
 			editor.dispose();
 		};
 	});
 </script>
 
-<div bind:this={divEl} class="h-full" />
+<div bind:this={divEl} />

src/lib/History/index.svelte

@@ -62,7 +62,7 @@
 	});
 </script>
 
-<Card class="h-1/2">
+<Card class="h-2/5">
 	<div slot="title" class="flex">
 		<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
 		<div class="flex-grow" />