mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
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:
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-
|
||||
|
||||
Reference in new issue
Block a user