fix code editor scroll

src/lib/components/CodeViewer/CodeViewer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Delta } from '$lib/deltas';
+	import codeviewer from './codeviewer';
+
+	export let doc: string;
+	export let deltas: Delta[];
+	export let end: number;
+	export let filepath: string;
+</script>
+
+<code class="w-full h-full" use:codeviewer={{ doc, deltas, end, filepath }} />

src/lib/components/CodeViewer/codeviewer.ts

@@ -4,9 +4,9 @@ import { EditorView, lineNumbers } from '@codemirror/view';
 import { colorEditor, highLightSyntax } from './colors';
 import { getLanguage } from './languages';
 
-const fixedHeightEditor = EditorView.theme({
-	'&': { height: '600px' },
-	'.cm-scroller': { overflow: 'auto' }
+const sizes = EditorView.theme({
+	'&': { height: '100%', width: '100%' },
+	'.cm-scroller': { overflow: 'scroll' }
 });
 
 const convertOperation = (operation: Operation): ChangeSpec => {
@@ -47,7 +47,7 @@ const extensions = [
 	EditorView.editable.of(false),
 	EditorView.lineWrapping,
 	lineNumbers(),
-	fixedHeightEditor
+	sizes
 ];
 
 type Params = { doc: string; deltas: Delta[]; end: number; filepath: string };

src/lib/components/CodeViewer/index.ts

@@ -0,0 +1,3 @@
+import { default as CodeViewer } from './CodeViewer.svelte';
+
+export default CodeViewer;

src/lib/components/index.ts

@@ -1,3 +1,4 @@
 export { default as BackForwardButtons } from './BackForwardButtons.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as CodeViewer } from './CodeViewer';

src/lib/index.ts

@@ -4,4 +4,3 @@ export * as log from './log';
 export * as toasts from './toasts';
 export * as sessions from './sessions';
 export * as week from './week';
-export { default as codeviewer } from './codeviewer';

src/routes/projects/[projectId]/timeline/+page.svelte

@@ -11,8 +11,8 @@
 	import { add, format, differenceInSeconds, addSeconds } from 'date-fns';
 	import { Slider } from 'fluent-svelte';
 	import TimelineDaySessionActivities from '$lib/components/timeline/TimelineDaySessionActivities.svelte';
+	import { CodeViewer } from '$lib/components';
 	import 'fluent-svelte/theme.css';
-	import { codeviewer } from '$lib';
 
 	export let data: PageData;
 	const { project, sessions } = data;
@@ -461,15 +461,12 @@
 									</div>
 								</div>
 								{#await selection.files then files}
-									<div class="m-6 flex-auto overflow-auto">
-										<code
-											class="overflow-y-scroll"
-											use:codeviewer={{
-												doc: files[selection.selectedFilePath],
-												deltas: selection.deltas[selection.selectedFilePath],
-												end: sliderValueTimestampMs(selection),
-												filepath: selection.selectedFilePath
-											}}
+									<div class="flex flex-auto overflow-auto">
+										<CodeViewer
+											doc={files[selection.selectedFilePath]}
+											deltas={selection.deltas[selection.selectedFilePath]}
+											end={sliderValueTimestampMs(selection)}
+											filepath={selection.selectedFilePath}
 										/>
 									</div>
 								{/await}