LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 17:29:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(inbox): let the conversation list scroll instead of clipping

Browse Source 
The conversation/contact list on the Inbox renders inside a flex
column with a fixed height, with the list in a `<ScrollArea
className="flex-1">`. A flex child defaults to `min-height: auto`, so
the ScrollArea grew to fit every conversation rather than shrinking to
the remaining space. The list then overflowed its container and was
clipped by the parent's `overflow-hidden`, with no vertical scrollbar —
so contacts past the fold were unreachable (issue #229).

Add `min-h-0` to the ScrollArea so it can shrink below its content and
the viewport scrolls.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arnas Donauskas 2026-06-08 19:26:29 +03:00
parent ba8d653bff
commit 9277746161
No known key found for this signature in database
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/inbox/conversation-list.tsx
View File

@ -187,8 +187,13 @@ export function ConversationList({
</DropdownMenu> </DropdownMenu>
</div> </div>
{/* Conversation Items */} {/* Conversation Items.
<ScrollArea className="flex-1"> `min-h-0` is load-bearing: a flex child defaults to
min-height:auto, so without it this ScrollArea grows to fit
every conversation instead of shrinking to the remaining
space — the list then overflows and gets clipped by the
parent's overflow-hidden with no scrollbar (issue #229). */}
<ScrollArea className="min-h-0 flex-1">
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" /> <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />