format json in logs

src/routes/dashboard/logs/+page.svelte

@@ -8,9 +8,9 @@
 	<Table.Header>
 		<Table.Row>
 			<Table.Head class="w-[100px]">Status</Table.Head>
-			<Table.Head>Request</Table.Head>
-			<Table.Head>Payload</Table.Head>
-			<Table.Head>Response</Table.Head>
+			<Table.Head class="w-[400px]">Request</Table.Head>
+			<Table.Head class="w-[400px]">Payload</Table.Head>
+			<Table.Head classs="w-[400px]">Response</Table.Head>
 			<Table.Head class="text-right">Timestamp</Table.Head>
 		</Table.Row>
 	</Table.Header>
@@ -18,9 +18,21 @@
 		{#each data.logs as log (log)}
 			<Table.Row>
 				<Table.Cell class="font-medium">{log.status}</Table.Cell>
-				<Table.Cell>{JSON.stringify(log.request)}</Table.Cell>
-				<Table.Cell>{JSON.stringify(log.payload)}</Table.Cell>
-				<Table.Cell>{JSON.stringify(log.response)}</Table.Cell>
+				<Table.Cell class="flex-col">
+					<pre>
+{JSON.stringify(log.request, null, 4)}
+</pre>
+				</Table.Cell>
+				<Table.Cell class="flex-col">
+					<pre>
+{JSON.stringify(log.payload, null, 4)}
+</pre>
+				</Table.Cell>
+				<Table.Cell class="">
+					<pre>
+{JSON.stringify(log.response, null, 4)}
+</pre>
+				</Table.Cell>
 				<Table.Cell class="text-right">
 					{new Date(log.createdAt)}
 				</Table.Cell>