From c44ab253f8d11497fee47d39f671b9b5d5fc1332 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 30 Dec 2024 22:40:14 +0200
Subject: [PATCH] web/timeline: fix rendering replies to unknown events in
 compact style

---
 web/src/ui/timeline/ReplyBody.css | 1 +
 web/src/ui/timeline/ReplyBody.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/timeline/ReplyBody.css b/web/src/ui/timeline/ReplyBody.css
index d6f96c4..391b456 100644
--- a/web/src/ui/timeline/ReplyBody.css
+++ b/web/src/ui/timeline/ReplyBody.css
@@ -3,6 +3,7 @@ blockquote.reply-body {
 	border-left: 2px solid var(--reply-border-color);
 	padding: .25rem .5rem;
 
+	&.sender-color-null { --reply-border-color: var(--blockquote-border-color); }
 	&.sender-color-0 { --reply-border-color: var(--sender-color-0); }
 	&.sender-color-1 { --reply-border-color: var(--sender-color-1); }
 	&.sender-color-2 { --reply-border-color: var(--sender-color-2); }
diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx
index bf7dc36..1788baa 100644
--- a/web/src/ui/timeline/ReplyBody.tsx
+++ b/web/src/ui/timeline/ReplyBody.tsx
@@ -53,8 +53,11 @@ export const ReplyIDBody = ({ room, eventID, isThread, small }: ReplyIDBodyProps
 	if (!event) {
 		// This caches whether the event is requested or not, so it doesn't need to be wrapped in an effect.
 		use(ClientContext)!.requestEvent(room, eventID)
-		return <blockquote className="reply-body">
-			Reply to unknown event<br/><code>{eventID}</code>
+		return <blockquote className={`reply-body sender-color-null ${small ? "small" : ""}`}>
+			{small && <div className="reply-spine"/>}
+			Reply to unknown event
+			{!small && <br/>}
+			<code>{eventID}</code>
 		</blockquote>
 	}
 	return <ReplyBody room={room} event={event} isThread={isThread} small={small}/>