diff --git a/app/src/assets/scss/_function.scss b/app/src/assets/scss/_function.scss
index d7108ef9d..254c3b54a 100644
--- a/app/src/assets/scss/_function.scss
+++ b/app/src/assets/scss/_function.scss
@@ -195,4 +195,11 @@
       z-index: 1;
     }
   }
+
+  &__date {
+    text-align: center;
+    line-height: 20px;
+    color: var(--b3-theme-on-surface);
+    background: var(--b3-theme-background);
+  }
 }
diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts
index ce48a1db4..b4e4de97d 100644
--- a/app/src/history/diff.ts
+++ b/app/src/history/diff.ts
@@ -65,6 +65,7 @@ const renderCompare = (element: HTMLElement) => {
     }
 
     fetchPost("/api/repo/openRepoSnapshotDoc", {id: element.getAttribute("data-id")}, (response) => {
+        leftElement.classList.remove("fn__none");
         const textElement = (leftElement.firstElementChild.nextElementSibling as HTMLTextAreaElement)
         if (response.data.isLargeDoc) {
             textElement.value = response.data.content;
@@ -135,15 +136,15 @@ export const showDiff = (ids: string) => {
         </ul>
     </div>
     <div class="fn__flex-1 fn__flex">
-        <div class="fn__flex-1 fn__flex-column">
-            <div>${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}</div>
-            <textarea style="height: 100%;width: 100%;" class="history__text fn__none"></textarea>
-            <div style="min-height: 100%;"></div>
+        <div class="fn__none fn__flex-1 fn__flex-column">
+            <div class="history__date">${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}</div>
+            <textarea class="history__text fn__none fn__flex-1"></textarea>
+            <div class="fn__flex-1"></div>
         </div>
         <div class="fn__none fn__flex-1 fn__flex-column" style="border-left: 1px solid var(--b3-border-color);">
-            <div>${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}</div>
-            <textarea style="height: 100%;width: 100%;" class="history__text fn__none"></textarea>
-            <div style="min-height: 100%;"></div>
+            <div class="history__date">${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}</div>
+            <textarea class="history__text fn__none fn__flex-1"></textarea>
+            <div class="fn__flex-1"></div>
         </div>
     </div>
 </div>`,