mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
fix(desktop): align thread composer activity row with the full-width composer
The thread footer's activity/typing row was centered into an mx-auto max-w-4xl column while the thread composer above it spans the full pane width, so in a wide thread pane the typing indicator floated toward the pane's center instead of hugging the composer's left gutter. - MessageThreadPanel.tsx: drop the mx-auto/max-w-4xl wrapper so the row spans the same width as the composer above it - Remove flex-1 from the toolbarExtraActions (agent pill strip) wrapper — it previously ate half the row and pushed the typing group to the midpoint whenever it mounted; the strip now sizes to its content, mirroring ChannelComposerActivityRow - Make the typing indicator's leading padding conditional like the channel row: composer-edge padding only when the typing group leads the row, pl-0 when it follows pills so the flex gap is the whole spacing Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
@@ -913,16 +913,30 @@ export function MessageThreadPanel({
|
||||
className={THREAD_PANEL_COMPOSER_GUTTER_CLASS}
|
||||
visible={hasComposerBottomActivity}
|
||||
>
|
||||
<div className="mx-auto flex w-full max-w-4xl items-center gap-2 overflow-visible pl-2">
|
||||
{/* No mx-auto/max-w column here: the composer above spans the
|
||||
full pane width, so the activity row must too or the typing
|
||||
group floats toward the pane's center. Mirrors
|
||||
ChannelComposerActivityRow: the pill strip sizes to its
|
||||
content and the typing group takes the remainder, instead of
|
||||
splitting the row 50/50. */}
|
||||
<div className="flex w-full items-center gap-3 overflow-visible">
|
||||
{activityAccessoryVisible && activityAccessoryContent ? (
|
||||
<div className="flex min-w-0 flex-1 overflow-visible">
|
||||
<div className="flex min-w-0 overflow-visible">
|
||||
{activityAccessoryContent}
|
||||
</div>
|
||||
) : null}
|
||||
{threadTypingPubkeys.length > 0 ? (
|
||||
<TypingIndicatorRow
|
||||
channel={channel}
|
||||
className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
|
||||
className={cn(
|
||||
"min-w-0 flex-1 py-0 pr-0",
|
||||
// Composer-edge alignment only when the typing group
|
||||
// leads the row; next to pills the row's gap is the
|
||||
// whole spacing.
|
||||
activityAccessoryVisible && activityAccessoryContent
|
||||
? "pl-0 sm:pl-0"
|
||||
: "pl-[calc(0.75rem+1px)] sm:pl-[calc(1rem+1px)]",
|
||||
)}
|
||||
currentPubkey={currentPubkey}
|
||||
profiles={profiles}
|
||||
typingPubkeys={threadTypingPubkeys}
|
||||
|
||||
Reference in New Issue
Block a user