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,22 +65,22 @@ blockquote.reply-body {
 			height: 1rem;
 			margin-right: .25rem;
 		}
+	}
 
-		> div.buttons {
-			margin-left: auto;
+	> div.buttons {
+		margin-left: auto;
+		display: flex;
+		gap: .25rem;
+
+		> button {
 			display: flex;
-			gap: .25rem;
+			align-items: center;
+			border-radius: .25rem;
+			padding: 0;
 
-			> button {
-				display: flex;
-				align-items: center;
-				border-radius: .25rem;
-				padding: 0;
-
-				> svg {
-					height: 24px;
-					width: 24px;
-				}
+			> svg {
+				height: 24px;
+				width: 24px;
 			}
 		}
 	}

web/src/ui/timeline/ReplyBody.tsx

@@ -111,32 +111,32 @@ export const ReplyBody = ({
 			<span className={`event-sender sender-color-${userColorIndex}`}>
 				{getDisplayname(event.sender, memberEvtContent)}
 			</span>
-			{onClose && <div className="buttons">
-				{onSetSilent && (isExplicitInThread || !isThread) && <TooltipButton
-					tooltipText={isSilent
-						? "Click to enable pinging the original author"
-						: "Click to disable pinging the original author"}
-					tooltipDirection="left"
-					className="silent-reply"
-					onClick={onSetSilent}
-				>
-					{isSilent ? <NotificationsOffIcon /> : <NotificationsIcon />}
-				</TooltipButton>}
-				{isThread && onSetExplicitInThread && <TooltipButton
-					tooltipText={isExplicitInThread
-						? "Click to respond in thread without replying to a specific message"
-						: "Click to reply explicitly in thread"}
-					tooltipDirection="left"
-					className="thread-explicit-reply"
-					onClick={onSetExplicitInThread}
-				>
-					{isExplicitInThread ? <ReplyIcon /> : <ThreadIcon />}
-				</TooltipButton>}
-				{onClose && <button className="close-reply" onClick={onClose}><CloseIcon/></button>}
-			</div>}
 		</div>
 		<ContentErrorBoundary>
 			<BodyType room={room} event={event} sender={memberEvt}/>
 		</ContentErrorBoundary>
+		{onClose && <div className="buttons">
+			{onSetSilent && (isExplicitInThread || !isThread) && <TooltipButton
+				tooltipText={isSilent
+					? "Click to enable pinging the original author"
+					: "Click to disable pinging the original author"}
+				tooltipDirection="left"
+				className="silent-reply"
+				onClick={onSetSilent}
+			>
+				{isSilent ? <NotificationsOffIcon /> : <NotificationsIcon />}
+			</TooltipButton>}
+			{isThread && onSetExplicitInThread && <TooltipButton
+				tooltipText={isExplicitInThread
+					? "Click to respond in thread without replying to a specific message"
+					: "Click to reply explicitly in thread"}
+				tooltipDirection="left"
+				className="thread-explicit-reply"
+				onClick={onSetExplicitInThread}
+			>
+				{isExplicitInThread ? <ReplyIcon /> : <ThreadIcon />}
+			</TooltipButton>}
+			{onClose && <button className="close-reply" onClick={onClose}><CloseIcon/></button>}
+		</div>}
 	</blockquote>
 }