web/timeline/reply: make it more compact on a single line

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>

web/src/ui/timeline/ReplyBody.css

@@ -2,6 +2,8 @@ blockquote.reply-body {
 	margin: 0 0 .25rem;
 	border-left: 2px solid var(--blockquote-border-color);
 	padding: .25rem .5rem;
+	display: flex;
+	gap: .5rem;
 
 	&.sender-color-0 { border-color: var(--sender-color-0); }
 	&.sender-color-1 { border-color: var(--sender-color-1); }
@@ -34,9 +36,11 @@ blockquote.reply-body {
 
 	> div.message-text {
 		display: -webkit-box;
-		-webkit-line-clamp: 2;
+		-webkit-line-clamp: 1;
+		line-clamp: 1;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
+		flex-grow: 1;
 		color: var(--semisecondary-text-color);
 	}
 
@@ -61,6 +65,7 @@ blockquote.reply-body {
 			height: 1rem;
 			margin-right: .25rem;
 		}
+	}
 
 	> div.buttons {
 		margin-left: auto;
@@ -80,4 +85,3 @@ blockquote.reply-body {
 		}
 	}
 }
-}

web/src/ui/timeline/ReplyBody.tsx

@@ -111,6 +111,10 @@ export const ReplyBody = ({
 			<span className={`event-sender sender-color-${userColorIndex}`}>
 				{getDisplayname(event.sender, memberEvtContent)}
 			</span>
+		</div>
+		<ContentErrorBoundary>
+			<BodyType room={room} event={event} sender={memberEvt}/>
+		</ContentErrorBoundary>
 		{onClose && <div className="buttons">
 			{onSetSilent && (isExplicitInThread || !isThread) && <TooltipButton
 				tooltipText={isSilent
@@ -134,9 +138,5 @@ export const ReplyBody = ({
 			</TooltipButton>}
 			{onClose && <button className="close-reply" onClick={onClose}><CloseIcon/></button>}
 		</div>}
-		</div>
-		<ContentErrorBoundary>
-			<BodyType room={room} event={event} sender={memberEvt}/>
-		</ContentErrorBoundary>
 	</blockquote>
 }