Vishnu

src/lib/Card/index.svelte

@@ -2,7 +2,7 @@
 	<div class="bg-blue-400 border-gray-400 p-2 flex-none">
 		<slot name="title" />
 	</div>
-	<div class="flex-grow">
+	<div class="flex-grow overflow-auto">
 		<slot />
 	</div>
 </div>

src/lib/Editor/index.svelte

@@ -55,17 +55,16 @@
 		Monaco = await import('monaco-editor');
 		initEditor(Monaco);
 
-		// divEl = document.getElementById('editor') as HTMLDivElement;
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(async () => {
 			dispatch('update', {
 				text: editor.getValue()
 			});
 		});
-		editor.layout({
-			height: divEl.parentElement.offsetHeight,
-			width: divEl.parentElement.offsetWidth
-		});
+		// editor.layout({
+		// 	height: divEl.offsetHeight,
+		// 	width: divEl.offsetWidth
+		// });
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,
@@ -79,4 +78,14 @@
 	});
 </script>
 
-<div bind:this={divEl} />
+<div bind:this={divEl} class="edit" />
+
+<style>
+	.edit {
+		position: absolute;
+		width: 100%;
+		height: 90%;
+		left: 0;
+		top: 0;
+	}
+</style>

src/lib/History/index.svelte

@@ -12,7 +12,7 @@
 	import { notify, prompt } from '$lib/Util/notify';
 	import { onMount } from 'svelte';
 
-	const HISTORY_SAVE_INTERVAL: number = 60000;
+	const HISTORY_SAVE_INTERVAL: number = 1000;
 
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		autoHistoryMode.set('timeline' === message.detail.id);
@@ -75,7 +75,7 @@
 			>
 		</div>
 	</div>
-	<ul class="p-2 space-y-2">
+	<ul class="p-2 space-y-2 custom-container overflow-auto">
 		{#each $historyStore as { state, time, name }}
 			<li class="rounded p-2 shadow block">
 				{new Date(time)}
@@ -86,3 +86,10 @@
 		{/each}
 	</ul>
 </Card>
+
+<style>
+	.custom-contaniner {
+		height: 100%;
+		overflow-y: auto;
+	}
+</style>

src/routes/edit.svelte

@@ -123,10 +123,9 @@
 				</div>
 
 				<div class="h-full flex-grow flex flex-col">
-					<div class="flex-grow">
+					<div class="flex-grow" style="position: relative;">
 						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 					</div>
-					<div class="flex-none">Sample</div>
 				</div>
 			</Card>
 			<History />