[web] Show output in submissions

web/src/lib/styles/global.css

@@ -0,0 +1,6 @@
+.code {
+	font-family: Menlo, Consolas, monospace;
+    white-space: pre;
+    overflow-wrap: normal;
+	overflow-x: scroll;
+}

web/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import 'bootstrap/dist/css/bootstrap.min.css';
+	import '$lib/styles/global.css';
 	import { onMount } from 'svelte';
 	onMount(async () => {
 		await import('bootstrap');

web/src/routes/admin/diff/[submissionId]/+page.svelte

@@ -72,7 +72,7 @@
 </div>
 
 <h3>Output</h3>
-<textarea use:stretchTextarea class="mb-3 form-control" disabled>{data.output}</textarea>
+<textarea use:stretchTextarea class="code mb-3 form-control" disabled>{data.output}</textarea>
 
 <h3>Diff</h3>
 <div class="mt-3" id="diff" />

web/src/routes/admin/submissions/[submissionId]/+page.server.ts

@@ -27,7 +27,8 @@ export const load = (async ({ params }) => {
 		submitTime: submission.createdAt,
 		gradedTime: submission.gradedAt,
 		message: submission.message,
-		diff: submission.diff
+		diff: submission.diff,
+		output: submission.actualOutput
 	};
 }) satisfies PageServerLoad;
 

web/src/routes/admin/submissions/[submissionId]/+page.svelte

@@ -4,6 +4,7 @@
 	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
 	import 'diff2html/bundles/css/diff2html.min.css';
 	import { enhance } from '$app/forms';
+	import { stretchTextarea } from '$lib/util';
 
 	export let data: PageData;
 	export let form: Actions;
@@ -106,6 +107,8 @@
 		</div>
 	</div>
 {:else if data.state == 'Incorrect'}
-	<h2 style="text-align:center">Diff</h2>
+	<h3 style="text-align:center">Output</h3>
+	<textarea use:stretchTextarea class="code mb-3 form-control" disabled>{data.output}</textarea>
+	<h3 style="text-align:center">Diff</h3>
 	<div id="diff" />
 {/if}