diff --git a/appview/pages/templates/repo/fragments/splitDiff.html b/appview/pages/templates/repo/fragments/splitDiff.html
--- a/appview/pages/templates/repo/fragments/splitDiff.html
+++ b/appview/pages/templates/repo/fragments/splitDiff.html
@@ -3,59 +3,59 @@ {{ $name := .Id }}
 {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800" -}}
 {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
 {{- $lineNrSepStyle := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
-{{- $containerStyle := "flex min-w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
+{{- $containerStyle := "inline-flex w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
 {{- $emptyStyle := "bg-gray-200/30 dark:bg-gray-700/30" -}}
 {{- $addStyle := "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400" -}}
 {{- $delStyle := "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 " -}}
 {{- $ctxStyle := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" -}}
 {{- $opStyle := "w-5 flex-shrink-0 select-none text-center" -}}
 <div class="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700">
-<pre class="overflow-x-auto col-span-1"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</div>
+<div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</span>
  {{- range .LeftLines -}}
    {{- if .IsEmpty -}}
-     <div class="{{ $emptyStyle }} {{ $containerStyle }}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></div>
-       <div class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></div>
-       <div class="px-2 invisible" aria-hidden="true">{{ .Content }}</div>
-     </div>
+     <span class="{{ $emptyStyle }} {{ $containerStyle }}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></span>
+       <span class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></span>
+       <span class="px-2 invisible" aria-hidden="true">{{ .Content }}</span>
+     </span>
    {{- else if eq .Op.String "-" -}}
-     <div class="{{ $delStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
-       <div class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Content }}</div>
-     </div>
+    <span class="{{ $delStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
+      <span class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></span>
+      <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+      <span class="px-2 whitespace-pre">{{ .Content }}</span>
+    </span>
    {{- else if eq .Op.String " " -}}
-     <div class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
-       <div class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Content }}</div>
-     </div>
+    <span class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
+      <span class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></span>
+      <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+      <span class="px-2 whitespace-pre">{{ .Content }}</span>
+    </span>
    {{- end -}}
  {{- end -}}
- {{- end -}}</div></div></pre>
+ {{- end -}}</div></div></div>
 
-<pre class="overflow-x-auto col-span-1"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</div>
+<div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</span>
  {{- range .RightLines -}}
    {{- if .IsEmpty -}}
-     <div class="{{ $emptyStyle }} {{ $containerStyle }}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></div>
-       <div class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></div>
-       <div class="px-2 invisible" aria-hidden="true">{{ .Content }}</div>
-     </div>
+     <span class="{{ $emptyStyle }} {{ $containerStyle }}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></span>
+       <span class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></span>
+       <span class="px-2 invisible" aria-hidden="true">{{ .Content }}</span>
+     </span>
    {{- else if eq .Op.String "+" -}}
-     <div class="{{ $addStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2" >{{ .Content }}</div>
-     </div>
+     <span class="{{ $addStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a></span>
+       <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+       <span class="px-2 whitespace-pre">{{ .Content }}</span>
+     </span>
    {{- else if eq .Op.String " " -}}
-     <div class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Content }}</div>
-     </div>
+     <span class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a> </span>
+       <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+       <span class="px-2 whitespace-pre">{{ .Content }}</span>
+     </span>
    {{- end -}}
  {{- end -}}
- {{- end -}}</div></div></pre>
+ {{- end -}}</div></div></div>
 </div>
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/unifiedDiff.html b/appview/pages/templates/repo/fragments/unifiedDiff.html
--- a/appview/pages/templates/repo/fragments/unifiedDiff.html
+++ b/appview/pages/templates/repo/fragments/unifiedDiff.html
@@ -1,47 +1,46 @@
 {{ define "repo/fragments/unifiedDiff" }}
 {{ $name := .Id }}
-<pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</div>
+<div class="overflow-x-auto font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</span>
  {{- $oldStart := .OldPosition -}}
  {{- $newStart := .NewPosition -}}
  {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 target:bg-yellow-200 target:dark:bg-yellow-600" -}}
  {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
  {{- $lineNrSepStyle1 := "" -}}
  {{- $lineNrSepStyle2 := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
- {{- $containerStyle := "flex min-w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
+ {{- $containerStyle := "inline-flex w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
  {{- $addStyle := "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 " -}}
  {{- $delStyle := "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 " -}}
  {{- $ctxStyle := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" -}}
  {{- $opStyle := "w-5 flex-shrink-0 select-none text-center" -}}
  {{- range .Lines -}}
    {{- if eq .Op.String "+" -}}
-     <div class="{{ $addStyle }} {{ $containerStyle }}" id="{{$name}}-N{{$newStart}}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Line }}</div>
-     </div>
+     <span class="{{ $addStyle }} {{ $containerStyle }}" id="{{$name}}-N{{$newStart}}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></span>
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></span>
+       <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+       <span class="px-2 whitespace-pre">{{ .Line }}</span>
+     </span>
      {{- $newStart = add64 $newStart 1 -}}
    {{- end -}}
    {{- if eq .Op.String "-" -}}
-     <div class="{{ $delStyle }} {{ $containerStyle }}" id="{{$name}}-O{{$oldStart}}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Line }}</div>
-     </div>
+     <span class="{{ $delStyle }} {{ $containerStyle }}" id="{{$name}}-O{{$oldStart}}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></span>
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></span>
+       <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+       <span class="px-2 whitespace-pre">{{ .Line }}</span>
+     </span>
      {{- $oldStart = add64 $oldStart 1 -}}
    {{- end -}}
    {{- if eq .Op.String " " -}}
-     <div class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-O{{$oldStart}}-N{{$newStart}}">
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}-N{{$newStart}}">{{ $oldStart }}</a></div>
-       <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}-N{{$newStart}}">{{ $newStart }}</a></div>
-       <div class="{{ $opStyle }}">{{ .Op.String }}</div>
-       <div class="px-2">{{ .Line }}</div>
-     </div>
+     <span class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-O{{$oldStart}}-N{{$newStart}}">
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}-N{{$newStart}}">{{ $oldStart }}</a></span>
+       <span class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}-N{{$newStart}}">{{ $newStart }}</a></span>
+       <span class="{{ $opStyle }}">{{ .Op.String }}</span>
+       <span class="px-2 whitespace-pre">{{ .Line }}</span>
+     </span>
      {{- $newStart = add64 $newStart 1 -}}
      {{- $oldStart = add64 $oldStart 1 -}}
    {{- end -}}
  {{- end -}}
- {{- end -}}</div></div></pre>
+ {{- end -}}</div></div></div>
 {{ end }}
-