diff --git a/src/lib/components/CodeViewer/CodeViewer.svelte b/src/lib/components/CodeViewer/CodeViewer.svelte
index c18e218de..d5566fde1 100644
--- a/src/lib/components/CodeViewer/CodeViewer.svelte
+++ b/src/lib/components/CodeViewer/CodeViewer.svelte
@@ -90,9 +90,9 @@
 		return { html: content, highlighted };
 	};
 
-	$: rows = diffRows.rows.map((row) => ({ ...row, render: renderRowContent(row) }));
+	$: renderedRows = diffRows.rows.map((row) => ({ ...row, render: renderRowContent(row) }));
 
-	type RenderedRow = (typeof rows)[0];
+	type RenderedRow = (typeof renderedRows)[0];
 
 	const padHighlighted = (rows: RenderedRow[]): RenderedRow[] => {
 		const chunks: (RenderedRow[] | RenderedRow)[] = [];
@@ -168,35 +168,55 @@
 		}
 		return chunks.flatMap((chunk) => chunk);
 	};
+
+	$: rows = highlight.length > 0 ? padHighlighted(renderedRows) : renderedRows;
+	$: originalLineNumberDigits = String(rows.at(-1)?.originalLineNumber || '0').length;
+	$: currentLineNumberDigits = String(rows.at(-1)?.currentLineNumber || '0').length;
 </script>
 
-<div class="diff-listing w-full select-text whitespace-pre font-mono">
-	{#each highlight.length > 0 ? padHighlighted(rows) : rows as row}
-		{@const baseNumber =
-			row.type === RowType.Equal || row.type === RowType.Deletion
-				? String(row.originalLineNumber)
-				: ''}
-		{@const curNumber =
-			row.type === RowType.Equal || row.type === RowType.Addition
-				? String(row.currentLineNumber)
-				: ''}
-		<div class="select-none pr-1 pl-2.5 text-right text-[#8C8178]">{baseNumber}</div>
-		<div class="select-none pr-1 pl-2.5 text-right text-[#8C8178]">{curNumber}</div>
-		<div
-			class="diff-line-marker"
-			class:diff-line-addition={row.type === RowType.Addition}
-			class:diff-line-deletion={row.type === RowType.Deletion}
-		>
-			{row.type === RowType.Addition ? '+' : row.type === RowType.Deletion ? '-' : ''}
-		</div>
-		<div
-			class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
-			class="px-1 diff-line-{row.type}"
-			data-line-number={curNumber}
-		>
-			{#each row.render.html as content}
-				{@html content}
-			{/each}
-		</div>
-	{/each}
-</div>
+<table class="w-full whitespace-pre font-mono">
+	<tbody>
+		{#each rows as row}
+			{@const baseNumber =
+				row.type === RowType.Equal || row.type === RowType.Deletion
+					? String(row.originalLineNumber)
+					: ''}
+			{@const curNumber =
+				row.type === RowType.Equal || row.type === RowType.Addition
+					? String(row.currentLineNumber)
+					: ''}
+			<tr>
+				<td
+					class="pr-1 pl-2.5 min-w-[{originalLineNumberDigits}ch] text-right text-[#8C8178] before:content-[attr(data-line-number)]"
+					data-line-number={baseNumber}
+				/>
+				<td
+					class="pr-1 pl-2.5 min-w-[{currentLineNumberDigits}ch] text-right text-[#8C8178] before:content-[attr(data-line-number)]"
+					data-line-number={curNumber}
+				/>
+				<td
+					class="px-1.5 before:content-[attr(data-marker)]"
+					class:diff-line-addition={row.type === RowType.Addition}
+					class:diff-line-deletion={row.type === RowType.Deletion}
+					data-marker={row.type === RowType.Addition
+						? '+'
+						: row.type === RowType.Deletion
+						? '-'
+						: ' '}
+				/>
+				<td class="px-1 diff-line-{row.type}">
+					{#each row.render.html as content}
+						{@html content}
+					{/each}
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	table {
+		/* https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela */
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+</style>
diff --git a/src/lib/components/CodeViewer/diff.css b/src/lib/components/CodeViewer/diff.css
index 4fc9c1ba2..c81873f2d 100644
--- a/src/lib/components/CodeViewer/diff.css
+++ b/src/lib/components/CodeViewer/diff.css
@@ -1,14 +1,3 @@
-.diff-listing {
-	display: grid;
-	grid-template-columns: max-content max-content max-content auto;
-}
-
-.diff-line-marker {
-	border-right: 1px solid var(--color-details-hairline);
-	width: 20px;
-	text-align: center;
-}
-
 .diff-line-marker-addition,
 .diff-line-addition {
 	--override-addition-background-color: hsl(144deg 55% 49% / 20%);