From 465d7c352402b42b995c46f61c05b6d3cbc2b42e Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Tue, 12 Nov 2024 14:15:44 +0200
Subject: [PATCH] web/timeline: render reason in member events

---
 web/src/ui/timeline/content/MemberBody.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/timeline/content/MemberBody.tsx b/web/src/ui/timeline/content/MemberBody.tsx
index 147a49e..dccaf1f 100644
--- a/web/src/ui/timeline/content/MemberBody.tsx
+++ b/web/src/ui/timeline/content/MemberBody.tsx
@@ -87,9 +87,11 @@ const MemberBody = ({ event, sender }: EventContentProps) => {
 	const content = event.content as MemberEventContent
 	const prevContent = event.unsigned.prev_content as MemberEventContent | undefined
 	return <div className="member-body">
-		{sender?.content.displayname ?? event.sender} {
-			useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)
-		}
+		<span className="sender-name">{sender?.content.displayname ?? event.sender}</span>
+		<span className="change-description">
+			{useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)}
+		</span>
+		{content.reason ? <span className="reason">for {content.reason}</span> : null}
 	</div>
 }