diff --git a/src/lib/components/events/content/Patch.svelte b/src/lib/components/events/content/Patch.svelte
index 4fbee37..6b2590b 100644
--- a/src/lib/components/events/content/Patch.svelte
+++ b/src/lib/components/events/content/Patch.svelte
@@ -25,6 +25,8 @@
     expand_files = expand_files.map((_) => true)
   }
 
+  let expand_full_files = files.map((_) => false)
+
   function extractTagContent(name: string): string | undefined {
     let tag = tags.find((tag) => tag[0] === name)
     return tag ? tag[1] : undefined
@@ -62,90 +64,162 @@
   </div>
 
   {#each files as file, index}
-    <div class="my-2 border border-base-300">
-      <button
-        class=" 400 flex w-full bg-base-200 p-3"
-        on:click={() => {
-          expand_files[index] = !expand_files[index]
-        }}
-      >
-        <div class="flex-none text-sm">
-          <span>
-            {file.to || file.from}
-          </span>
-          <span
-            class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70"
-          >
-            {#if file.new}
-              <span>created file</span>
-            {/if}
-            {#if file.deleted}
-              <span>deleted file</span>
-            {/if}
-            {#if !file.deleted}
-              <span class="text-success">+{file.additions}</span>
-            {/if}
-            {#if !file.new}
-              <span class="text-error">-{file.deletions}</span>
-            {/if}
-          </span>
-        </div>
-        <div class="flex-grow text-right text-xs opacity-40">
+    <div
+      class="my-2 border border-base-300 {expand_full_files[index]
+        ? 'absolute left-0 z-10 w-screen bg-base-300 px-5'
+        : ''}"
+    >
+      <div class="flex w-full bg-base-200">
+        <button
+          class="flex flex-grow p-3 text-sm"
+          on:click={() => {
+            if (expand_full_files[index]) {
+              expand_full_files[index] = false
+              expand_files[index] = false
+            } else if (expand_files[index]) {
+              expand_full_files[index] = true
+            } else {
+              expand_files[index] = true
+            }
+          }}
+          ><div class="flex-none">
+            <span>
+              {file.to || file.from}
+            </span>
+            <span
+              class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70"
+            >
+              {#if file.new}
+                <span>created file</span>
+              {/if}
+              {#if file.deleted}
+                <span>deleted file</span>
+              {/if}
+              {#if !file.deleted}
+                <span class="text-success">+{file.additions}</span>
+              {/if}
+              {#if !file.new}
+                <span class="text-error">-{file.deletions}</span>
+              {/if}
+            </span>
+          </div>
+          <div class="flex-grow"></div>
+        </button>
+        <button
+          class="flex-none p-3 text-right text-xs opacity-40"
+          on:click={() => {
+            expand_files[index] = !expand_files[index]
+            expand_full_files[index] = false
+          }}
+        >
           {expand_files[index] ? 'colapse' : 'expand'}
-        </div>
-      </button>
+        </button>
+        <button
+          class="flex-none p-3 text-right text-xs opacity-40"
+          on:click={() => {
+            expand_full_files[index] = !expand_full_files[index]
+            if (expand_full_files[index]) expand_files[index] = true
+          }}
+        >
+          full
+        </button>
+      </div>
       {#if expand_files[index]}
-        <div class="border-t-1 border-base-300">
-          {#each file.chunks as chunk, index}
-            <div class="overflow-x-auto">
+        <div class="border-t-1 flex border-base-300 font-mono text-xs">
+          <div class="flex-full select-none text-right">
+            {#each file.chunks as chunk, index}
               {#if index !== 0}
-                <div class="text-middle h-6 bg-base-200 font-mono text-xs">
+                <div class="flex w-full bg-base-200">
                   <div
-                    class="w-8 flex-none select-none pr-2 text-right opacity-50"
+                    class="w-8 flex-none whitespace-pre pb-2 pr-2 pt-1 opacity-50"
                   >
                     ...
                   </div>
                 </div>
               {/if}
               {#each chunk.changes as change, i}
-                <div class="flex w-full bg-base-100 font-mono text-xs">
+                <div class="flex w-full bg-base-100">
                   <div
-                    class="w-8 flex-none select-none {change.type == 'add'
-                      ? 'bg-success/30'
+                    class="w-8 flex-none whitespace-pre {change.type == 'add'
+                      ? 'bg-success/50'
                       : change.type == 'del'
-                        ? 'bg-error/30'
-                        : 'bg-slate-500/20'} pr-2 text-right opacity-50"
+                        ? 'bg-error/50'
+                        : 'bg-slate-500/20'} pr-2 opacity-50"
+                    class:pt-3={index === 0 && i === 0}
+                    class:pb-3={index === file.chunks.length - 1 &&
+                      i === chunk.changes.length - 1}
                   >
                     {isAddChange(change) &&
                     i !== 0 &&
                     isDeleteChange(chunk.changes[i - 1])
-                      ? ''
+                      ? ' '
                       : extractChangeLine(change)}
                   </div>
-                  <div
-                    class="w-full flex-grow whitespace-pre {change.type == 'add'
-                      ? 'bg-success/10'
-                      : change.type == 'del'
-                        ? 'bg-error/10'
-                        : ''}"
-                  >
-                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    {@html hljs.highlight(
-                      change.type == 'normal'
-                        ? change.content
-                        : change.content.substring(1),
-                      {
-                        language:
-                          (file.to || file.from)?.split('.').pop() || '',
-                      }
-                    ).value}
-                  </div>
                 </div>
               {/each}
-            </div>
-          {/each}
+            {/each}
+          </div>
+          <div class="flex-auto overflow-x-auto">
+            {#each file.chunks as chunk, index}
+              <div class="w-fit">
+                {#if index !== 0}
+                  <div class="flex h-7 w-full bg-base-200"></div>
+                {/if}
+                {#each chunk.changes as change, i}
+                  <div class="flex w-full bg-base-100">
+                    <div
+                      class="w-full flex-grow whitespace-pre {change.type ==
+                      'add'
+                        ? 'bg-success/20'
+                        : change.type == 'del'
+                          ? 'bg-error/20'
+                          : ''}"
+                      class:pt-3={index === 0 && i === 0}
+                      class:pb-3={index === file.chunks.length - 1 &&
+                        i === chunk.changes.length - 1}
+                    >
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                      {@html hljs.highlight(
+                        change.type == 'normal'
+                          ? change.content
+                          : change.content.substring(1),
+                        {
+                          language:
+                            (file.to || file.from)?.split('.').pop() || '',
+                        }
+                      ).value}
+                      {#if (change.type == 'normal' ? change.content : change.content.substring(1)).length === 0}
+                        <!-- force empty line to have height -->
+                        <span></span>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/each}
+          </div>
         </div>
       {/if}
     </div>
+    <!-- vertical padding for full width so that content retains it space -->
+    {#if expand_full_files[index]}
+      <div class="w-full whitespace-pre font-mono text-xs">
+        <span class="block p-3 text-sm"> </span>
+        {#each file.chunks as chunk, index}
+          {#if index !== 0}
+            <span class="block h-7 p-3"> </span>
+          {/if}
+          {#each chunk.changes as _, i}
+            <span
+              class="block"
+              class:pt-3={index === 0 && i === 0}
+              class:pb-3={index === file.chunks.length - 1 &&
+                i === chunk.changes.length - 1}
+              >&nbsp;
+            </span>
+          {/each}
+        {/each}
+      </div>
+    {/if}
   {/each}
 </div>