diff --git a/appview/pages/templates/repo/commit.html b/appview/pages/templates/repo/commit.html
--- a/appview/pages/templates/repo/commit.html
+++ b/appview/pages/templates/repo/commit.html
@@ -116,16 +116,7 @@
       {{ block "content" . }}{{ end }}
     {{ end }}
 
-    {{ block "contentAfterLayout" . }}
-    <div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
-      <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-        {{ block "contentAfterLeft" . }} {{ end }}
-      </div>
-      <main class="col-span-1 md:col-span-10">
-        {{ block "contentAfter" . }}{{ end }}
-      </main>
-    </div>
-    {{ end }}
+    {{ block "contentAfter" . }}{{ end }}
   </div>
 {{ end }}
 
@@ -139,11 +130,3 @@
   {{ template "repo/fragments/diff" (list .Diff .DiffOpts) }}
 {{end}}
 
-{{ define "contentAfterLeft" }}
-  <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-    {{ template "repo/fragments/diffOpts" .DiffOpts }}
-  </div>
-  <div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
-    {{ template "repo/fragments/diffChangedFiles" .Diff }}
-  </div>
-{{end}}
diff --git a/appview/pages/templates/repo/compare/compare.html b/appview/pages/templates/repo/compare/compare.html
--- a/appview/pages/templates/repo/compare/compare.html
+++ b/appview/pages/templates/repo/compare/compare.html
@@ -22,16 +22,7 @@
       {{ block "content" . }}{{ end }}
     {{ end }}
 
-    {{ block "contentAfterLayout" . }}
-    <div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
-      <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-        {{ block "contentAfterLeft" . }} {{ end }}
-      </div>
-      <main class="col-span-1 md:col-span-10">
-        {{ block "contentAfter" . }}{{ end }}
-      </main>
-    </div>
-    {{ end }}
+    {{ block "contentAfter" . }}{{ end }}
   </div>
 {{ end }}
 
@@ -43,13 +34,4 @@
 
 {{ define "contentAfter" }}
   {{ template "repo/fragments/diff" (list .Diff .DiffOpts) }}
-{{end}}
-
-{{ define "contentAfterLeft" }}
-  <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-    {{ template "repo/fragments/diffOpts" .DiffOpts }}
-  </div>
-  <div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
-    {{ template "repo/fragments/diffChangedFiles" .Diff }}
-  </div>
 {{end}}
diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -1,59 +1,180 @@
 {{ define "repo/fragments/diff" }}
+  <style>
+    #filesToggle:checked ~ div label[for="filesToggle"] .show-text { display: none; }
+    #filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
+    #filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
+    #filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
+    #filesToggle:not(:checked) ~ div div#files { width: 0; display: hidden; margin-right: 0; }
+  </style>
+
+  {{ template "diffTopbar" . }}
+  {{ block "diffLayout" . }} {{ end }}
+{{ end }}
+
+{{ define "diffTopbar" }}
   {{ $diff := index . 0 }}
   {{ $opts := index . 1 }}
 
-  {{ $commit := $diff.Commit }}
-  {{ $diff := $diff.Diff }}
-  {{ $isSplit := $opts.Split }}
-  {{ $this := $commit.This }}
-  {{ $parent := $commit.Parent }}
-  {{ $last := sub (len $diff) 1 }}
+  {{ block "filesCheckbox" $ }} {{ end }}
+  {{ block "subsCheckbox" $ }} {{ end }}
 
+  <!-- top bar -->
+  <div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2">
+    <!-- left panel toggle -->
+    {{ template "filesToggle" . }}
+
+    <!-- stats -->
+    {{ $stat := $diff.Stats }}
+    {{ $count := len $diff.ChangedFiles }}
+    {{ template "repo/fragments/diffStatPill" $stat }}
+    {{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
+
+    <!-- spacer -->
+    <div class="flex-grow"></div>
+
+    <!-- collapse diffs -->
+    {{ template "collapseToggle" }}
+
+    <!-- diff options -->
+    {{ template "repo/fragments/diffOpts" $opts }}
+
+    <!-- right panel toggle -->
+    {{ block "subsToggle" $ }} {{ end }}
+  </div>
+
+{{ end }}
+
+{{ define "diffLayout" }}
+  {{ $diff := index . 0 }}
+  {{ $opts := index . 1 }}
+
+  <div class="flex col-span-full flex-grow">
+    <!-- left panel -->
+    <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
+      <section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
+        {{ template "repo/fragments/fileTree" $diff.FileTree }}
+      </section>
+    </div>
+
+    <!-- main content -->
+    <div class="flex-1 min-w-0 sticky top-12 pb-12">
+      {{ template "diffFiles" (list $diff $opts) }}
+    </div>
+
+  </div>
+{{ end }}
+
+{{ define "diffFiles" }}
+  {{ $diff := index . 0 }}
+  {{ $opts := index . 1 }}
+  {{ $files := $diff.ChangedFiles }}
+  {{ $isSplit := $opts.Split }}
   <div class="flex flex-col gap-4">
-    {{ if eq (len $diff) 0 }}
+    {{ if eq (len $files) 0 }}
       <div class="text-center text-gray-500 dark:text-gray-400 py-8">
         <p>No differences found between the selected revisions.</p>
       </div>
     {{ else }}
-    {{ range $idx, $hunk := $diff }}
-      {{ with $hunk }}
-        <details open id="file-{{ .Id }}" class="group border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm" tabindex="{{ add $idx 1 }}">
-          <summary class="list-none cursor-pointer sticky top-0">
-            <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
-              <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
-                <span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
-                <span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
-                {{ template "repo/fragments/diffStatPill" .Stats }}
-
-                <div class="flex gap-2 items-center overflow-x-auto">
-                  {{ if .IsDelete }}
-                    {{ .Name.Old }}
-                  {{ else if (or .IsCopy .IsRename) }}
-                    {{ .Name.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ .Name.New }}
-                  {{ else }}
-                    {{ .Name.New }}
-                  {{ end }}
-                </div>
-              </div>
-            </div>
-          </summary>
-
-          <div class="transition-all duration-700 ease-in-out">
-            {{ if .IsBinary }}
-              <p class="text-center text-gray-400 dark:text-gray-500 p-4">
-              This is a binary file and will not be displayed.
-              </p>
-            {{ else }}
-              {{ if $isSplit }}
-                {{- template "repo/fragments/splitDiff" .Split -}}
-              {{ else }}
-                {{- template "repo/fragments/unifiedDiff" . -}}
-              {{ end }}
-            {{- end -}}
-          </div>
-        </details>
+      {{ range $idx, $file := $files }}
+        {{ template "diffFile" (list $idx $file $isSplit) }}
       {{ end }}
     {{ end }}
-    {{ end }}
   </div>
+{{ end }}
+
+{{ define "diffFile" }}
+  {{ $idx := index . 0 }}
+  {{ $file := index . 1 }}
+  {{ $isSplit := index . 2 }}
+  {{ with $file }}
+    <details open id="file-{{ .Id }}" class="group border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm" tabindex="{{ add $idx 1 }}">
+      <summary class="list-none cursor-pointer sticky top-12 group-open:border-b border-gray-200 dark:border-gray-700">
+        <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
+          <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
+            <span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
+            <span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
+            {{ template "repo/fragments/diffStatPill" .Stats }}
+
+            <div class="flex gap-2 items-center overflow-x-auto">
+              {{ $n := .Names }}
+              {{ if and $n.New $n.Old (ne $n.New $n.Old)}}
+                {{ $n.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ $n.New }}
+              {{ else if $n.New }}
+                {{ $n.New }}
+              {{ else }}
+                {{ $n.Old }}
+              {{ end }}
+            </div>
+          </div>
+        </div>
+      </summary>
+
+      <div class="transition-all duration-700 ease-in-out">
+        {{ $reason := .CanRender }}
+        {{ if $reason }}
+          <p class="text-center text-gray-400 dark:text-gray-500 p-4">{{ $reason }}</p>
+        {{ else }}
+          {{ if $isSplit }}
+            {{- template "repo/fragments/splitDiff" .Split -}}
+          {{ else }}
+            {{- template "repo/fragments/unifiedDiff" . -}}
+          {{ end }}
+        {{- end -}}
+      </div>
+    </details>
+  {{ end }}
+{{ end }}
+
+{{ define "filesCheckbox" }}
+  <input type="checkbox" id="filesToggle" class="peer/files hidden" checked/>
+{{ end }}
+
+{{ define "filesToggle" }}
+  <label title="Toggle filetree panel" for="filesToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normalcase">
+    <span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
+    <span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
+  </label>
+{{ end }}
+
+{{ define "collapseToggle" }}
+  <label 
+    title="Expand/Collapse diffs"
+    for="collapseToggle"
+    class="btn font-normal normal-case p-2"
+  >
+    <input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/>
+    <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
+      {{ i "fold-vertical" "w-4 h-4" }}
+      <span class="hidden md:inline">expand all</span>
+    </span>
+    <span class="peer-checked/collapse:inline-flex hidden flex items-center gap-2">
+      {{ i "unfold-vertical" "w-4 h-4" }}
+      <span class="hidden md:inline">collapse all</span>
+    </span>
+  </label>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const checkbox = document.getElementById('collapseToggle');
+      const details = document.querySelectorAll('details[id^="file-"]');
+
+      checkbox.addEventListener('change', function() {
+        details.forEach(detail => {
+          detail.open = checkbox.checked;
+        });
+      });
+
+      details.forEach(detail => {
+        detail.addEventListener('toggle', function() {
+          const allOpen = Array.from(details).every(d => d.open);
+          const allClosed = Array.from(details).every(d => !d.open);
+
+          if (allOpen) {
+            checkbox.checked = true;
+          } else if (allClosed) {
+            checkbox.checked = false;
+          }
+        });
+      });
+    });
+  </script>
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/diffChangedFiles.html b/appview/pages/templates/repo/fragments/diffChangedFiles.html
deleted file mode 100644
--- a/appview/pages/templates/repo/fragments/diffChangedFiles.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{{ define "repo/fragments/diffChangedFiles" }}
-  {{ $stat := .Stat }}
-  {{ $fileTree := fileTree .ChangedFiles }}
-  <section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
-    <div class="diff-stat">
-      <div class="flex gap-2 items-center">
-        <strong class="text-sm uppercase dark:text-gray-200">Changed files</strong>
-        {{ template "repo/fragments/diffStatPill" $stat }}
-      </div>
-      {{ template "repo/fragments/fileTree" $fileTree }}
-    </div>
-  </section>
-{{ end }}
diff --git a/appview/pages/templates/repo/fragments/interdiff.html b/appview/pages/templates/repo/fragments/interdiff.html
deleted file mode 100644
--- a/appview/pages/templates/repo/fragments/interdiff.html
+++ /dev/null
@@ -1,67 +0,0 @@
-{{ define "repo/fragments/interdiff" }}
-{{ $repo := index . 0 }}
-{{ $x := index . 1 }}
-{{ $opts := index . 2 }}
-{{ $fileTree := fileTree $x.AffectedFiles }}
-{{ $diff := $x.Files }}
-{{ $last := sub (len $diff) 1 }}
-{{ $isSplit := $opts.Split }}
-
-<div class="flex flex-col gap-4">
-  {{ range $idx, $hunk := $diff }}
-    {{ with $hunk }}
-      <details {{ if not (.Status.IsOnlyInOne) }}open{{end}} id="file-{{ .Name }}" class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
-        <summary class="list-none cursor-pointer sticky top-0">
-          <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
-            <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
-              <div class="flex gap-1 items-center" style="direction: ltr;">
-                {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
-                {{ if .Status.IsOk }}
-                  <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
-                {{ else if .Status.IsUnchanged }}
-                  <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
-                {{ else if .Status.IsOnlyInOne }}
-                  <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
-                {{ else if .Status.IsOnlyInTwo }}
-                  <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
-                {{ else if .Status.IsRebased }}
-                  <span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
-                {{ else }}
-                  <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
-                {{ end }}
-              </div>
-
-              <div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">{{ .Name }}</div>
-            </div>
-
-          </div>
-        </summary>
-
-        <div class="transition-all duration-700 ease-in-out">
-          {{ if .Status.IsUnchanged }}
-            <p class="text-center text-gray-400 dark:text-gray-500 p-4">
-            This file has not been changed.
-            </p>
-          {{ else if .Status.IsRebased }}
-            <p class="text-center text-gray-400 dark:text-gray-500 p-4">
-            This patch was likely rebased, as context lines do not match.
-            </p>
-          {{ else if .Status.IsError }}
-            <p class="text-center text-gray-400 dark:text-gray-500 p-4">
-            Failed to calculate interdiff for this file.
-            </p>
-          {{ else }}
-            {{ if $isSplit }}
-              {{- template "repo/fragments/splitDiff" .Split -}}
-            {{ else }}
-              {{- template "repo/fragments/unifiedDiff" . -}}
-            {{ end }}
-          {{- end -}}
-        </div>
-
-      </details>
-    {{ end }}
-  {{ end }}
-</div>
-{{ end }}
-
diff --git a/appview/pages/templates/repo/fragments/interdiffFiles.html b/appview/pages/templates/repo/fragments/interdiffFiles.html
deleted file mode 100644
--- a/appview/pages/templates/repo/fragments/interdiffFiles.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{{ define "repo/fragments/interdiffFiles" }}
-{{ $fileTree := fileTree .AffectedFiles }}
-<section class="px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm min-h-full text-sm">
-  <div class="diff-stat">
-    <div class="flex gap-2 items-center">
-      <strong class="text-sm uppercase dark:text-gray-200">files</strong>
-    </div>
-    {{ template "repo/fragments/fileTree" $fileTree }}
-  </div>
-</section>
-{{ end }}
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,7 +3,7 @@
 {{- $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 := "inline-flex 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:bg-yellow-200 target:dark:bg-yellow-700 scroll-mt-48" -}}
 {{- $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 " -}}
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
@@ -7,7 +7,7 @@
  {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
  {{- $lineNrSepStyle1 := "" -}}
  {{- $lineNrSepStyle2 := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
- {{- $containerStyle := "inline-flex 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:bg-yellow-200 target:dark:bg-yellow-700 scroll-mt-48" -}}
  {{- $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" -}}
diff --git a/appview/pages/templates/repo/pulls/interdiff.html b/appview/pages/templates/repo/pulls/interdiff.html
--- a/appview/pages/templates/repo/pulls/interdiff.html
+++ b/appview/pages/templates/repo/pulls/interdiff.html
@@ -25,7 +25,6 @@
       {{ template "repo/pulls/fragments/pullHeader" . }}
     </header>
   </section>
-
 {{ end }}
 
 {{ define "mainLayout" }}
@@ -34,28 +33,10 @@
       {{ block "content" . }}{{ end }}
     {{ end }}
 
-    {{ block "contentAfterLayout" . }}
-    <div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
-      <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-        {{ block "contentAfterLeft" . }} {{ end }}
-      </div>
-      <main class="col-span-1 md:col-span-10">
-        {{ block "contentAfter" . }}{{ end }}
-      </main>
-    </div>
-    {{ end }}
+    {{ block "contentAfter" . }}{{ end }}
   </div>
 {{ end }}
 
 {{ define "contentAfter" }}
-  {{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff .DiffOpts) }}
-{{end}}
-
-{{ define "contentAfterLeft" }}
-  <div class="flex flex-col gap-4 col-span-1 md:col-span-2">
-    {{ template "repo/fragments/diffOpts" .DiffOpts }}
-  </div>
-  <div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
-    {{ template "repo/fragments/interdiffFiles" .Interdiff }}
-  </div>
+  {{ template "repo/fragments/diff" (list .Interdiff .DiffOpts) }}
 {{end}}