fix(desktop): the composer surface can no longer be widened by its own content

The surface is a grid that never declared a column, and an implicit auto
column sizes to its items' min-content. The coding status row (branch, PR
chip, worktree path, counts — none of it wrapping) out-measured narrow panes
and silently set the track wider than the surface; every w-full child laid
out against that phantom width and overflow-hidden clipped the right edge,
send button first. grid-cols-[minmax(0,1fr)] pins the track to the surface.
This commit is contained in:
Brooklyn Nicholson
2026-08-20 01:22:00 -05:00
committed by brooklyn!
parent cef999c5cf
commit b656b0d3ba
+11 -3
View File
@@ -321,7 +321,7 @@ export function ChatBar({
return onCancel()
}, [activeQueueSessionKeyRef, onCancel])
const { compactPill, stacked } = useComposerMetrics({
const { compactPill, foldVoice, minimal, stacked } = useComposerMetrics({
composerDockRef,
composerRef,
composerSurfaceRef,
@@ -984,7 +984,9 @@ export function ChatBar({
status: conversation.status
}}
disabled={disabled}
foldVoice={foldVoice}
hasComposerPayload={hasComposerPayload}
minimal={minimal}
onDictate={dictate}
onQueue={queueDraft}
onToggleAutoSpeak={handleToggleAutoSpeak}
@@ -1242,7 +1244,13 @@ export function ChatBar({
{hudMode && busy && <span aria-hidden className="arc-border arc-composer" />}
<div
className={cn(
'group/composer-surface relative z-4 isolate grid grid-rows-[auto_1fr] overflow-hidden rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))]',
// grid-cols-[minmax(0,1fr)]: the implicit `auto` column sized
// itself to its items' min-content, so a status row whose
// content out-measured a narrow pane silently widened the
// track past the surface — and every `w-full` child (the fade,
// the input/controls row) laid out against that phantom width
// and got clipped by overflow-hidden, send button first.
'group/composer-surface relative z-4 isolate grid grid-cols-[minmax(0,1fr)] grid-rows-[auto_1fr] overflow-hidden rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))]',
COMPOSER_DROP_FADE_CLASS,
dragActive && COMPOSER_DROP_ACTIVE_CLASS
)}
@@ -1322,7 +1330,7 @@ export function ChatBar({
<ContribSlot area={COMPOSER_AREAS.leading} />
</div>
<div className="min-w-0 [grid-area:input]">{input}</div>
<div className="flex items-center justify-end gap-(--composer-control-gap) [grid-area:controls]">
<div className="flex min-w-0 items-center justify-end gap-(--composer-control-gap) [grid-area:controls]">
<ContribSlot area={COMPOSER_AREAS.actions} />
{controls}
</div>