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

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
This commit is contained in:
Sumner Evans 2024-12-08 20:12:01 -07:00 committed by Sumner Evans
parent 0b1d5cd354
commit 5acab4bdab
No known key found for this signature in database
2 changed files with 41 additions and 37 deletions

View file

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

View file

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