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:
Taylor Ho
2026-08-05 16:41:57 -07:00
committed by Carl
parent 442e08b4e0
commit df164431c7
@@ -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}