fix(coach): bound the conversation scroll region so the composer stays pinned

The message thread used h-full inside a plain-block wrapper, so its height
resolved against an auto-height parent: the scroll container grew with its
content instead of scrolling, pushing the composer down and leaving a stray
scrollbar on the page.

Make the thread wrapper a flex column and switch the thread (and its empty
state) from h-full to min-h-0 flex-1, so the scroll region takes a bounded
track from the flex parent. The conversation now scrolls cleanly inside the
card while the composer stays pinned to the bottom.
This commit is contained in:
Marc-André Bombeck committed 2026-06-18 23:58:43 +02:00
1 parent 8234427a94
commit 6f866ff1c6
2 files changed
+13 -3

No files matched your search

@@ -146,7 +146,14 @@ export function CoachDrawerBody({
</Button>
</div>
<div className="min-h-0 flex-1">{thread}</div>
{/* v1.18.6.1 — the thread wrapper must be a flex column itself so the
`<MessageThread>` scroll region resolves a bounded height. The
wrapper used to be a plain block, so the thread's `h-full` resolved
against an auto-height parent and the scroll container grew with its
content instead of scrolling — pushing the composer off-screen and
leaving a stray scrollbar on the page. `flex min-h-0 flex-1 flex-col`
gives the thread a definite track to scroll within. */}
<div className="flex min-h-0 flex-1 flex-col">{thread}</div>
{/* Composer pinned to the bottom. */}
<div
data-slot="coach-drawer-composer"
@@ -342,7 +342,7 @@ export function MessageThread({
data-slot="coach-message-thread"
role="status"
aria-live="polite"
className="text-muted-foreground flex h-full flex-col items-center justify-center gap-3 px-6 text-center"
className="text-muted-foreground flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-6 text-center"
>
<div
aria-hidden="true"
@@ -362,7 +362,10 @@ export function MessageThread({
ref={scrollerRef}
data-slot="coach-message-thread"
className={cn(
"flex h-full flex-col gap-4 overflow-y-auto px-4 py-4 sm:px-6",
// v1.18.6.1 — `min-h-0 flex-1` (not `h-full`) so the scroll region
// resolves its height from the flex parent rather than a 100%-of-auto
// chain that let the thread grow instead of scroll.
"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 sm:px-6",
// v1.18.6 (CCH-01) — on the now full-width page surface a thread
// stretched edge-to-edge sprawled the prose to an unreadable
// measure. Centre the content on a comfortable max width (Claude-