add expanded logs drawer

frontend/src/lib/components/LogViewer.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Drawer, DrawerContent } from './common'
+
 	export let content: string | undefined
 	export let isLoading: boolean
 
@@ -14,16 +16,31 @@
 	export function scrollToBottom() {
 		scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100)
 	}
+
+	let logViewer: Drawer
 </script>
 
+<Drawer bind:this={logViewer} size="900px">
+	<DrawerContent title={'Expanded Logs'} on:close={logViewer.closeDrawer}>
+		<div>
+			<pre class="bg-gray-50 text-xs w-full p-2"
+				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
 		<div
 			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
 		>
-			<div class="p-2 text-xs flex gap-2 items-center">
-				Auto scroll
-				<input type="checkbox" bind:checked={scroll} />
+			<div class="flex gap-1">
+				<button on:click={logViewer.openDrawer}>Expand</button>
+				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
+					Auto scroll
+					<input type="checkbox" bind:checked={scroll} />
+				</div>
 			</div>
 		</div>
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"