From bc4d89af3ab0cd9807927abda7b99ba42ff5d929 Mon Sep 17 00:00:00 2001
From: GrapeApple0 <84321396+GrapeApple0@users.noreply.github.com>
Date: Sat, 30 Sep 2023 07:43:21 +0000
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=81=8C?=
 =?UTF-8?q?=E8=87=AA=E5=88=86=E3=81=AE=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=81=97=E3=81=BE=E3=81=86=E3=83=90=E3=82=B0=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkNoteDetailed.vue         | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 8afb3acb1f..b1f3720d59 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -176,8 +176,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="tab === 'history'" :class="$style.tab_history">
 			<div style="display: grid;">
-				<div v-for="text in appearNote.noteEditHistory.reverse()" :key="text">
-					<MkNotePreview :class="$style.historyNote" :text="text"/>
+				<div v-for="text in appearNote.noteEditHistory" :class="$style.historyRoot" :key="text">
+					<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
+					<div :class="$style.historyMain">
+						<div :class="$style.historyHeader">
+							<MkUserName :user="appearNote.user" :nowrap="true"/>
+						</div>
+						<div>
+							<div>
+								<Mfm :text="text.trim()" :author="appearNote.user" :i="$i"/>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -822,10 +832,34 @@ function loadConversation() {
 	}
 }
 
-.historyNote {
-	padding-top: 10px;
-	min-height: 75px;
-	overflow: auto;
+.historyRoot {
+	display: flex;
+	margin: 0;
+	padding: 10px;
+	overflow: clip;
+	font-size: 0.95em;
+}
+
+.historyMain {
+	flex: 1;
+	min-width: 0;
+}
+
+.historyHeader {
+	margin-bottom: 2px;
+	font-weight: bold;
+	width: 100%;
+	overflow: clip;
+    text-overflow: ellipsis;
+}
+.avatar {
+	flex-shrink: 0 !important;
+	display: block !important;
+	margin: 0 10px 0 0 !important;
+	width: 40px !important;
+	height: 40px !important;
+	border-radius: 8px !important;
+	pointer-events: none !important;
 }
 
 .muted {