From 9277746161c5241b50eeffab2400ee4f1cfb55fe Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Mon, 8 Jun 2026 19:26:29 +0300
Subject: [PATCH] fix(inbox): let the conversation list scroll instead of
 clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/inbox/conversation-list.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/inbox/conversation-list.tsx b/src/components/inbox/conversation-list.tsx
index 62068c9..1886032 100644
--- a/src/components/inbox/conversation-list.tsx
+++ b/src/components/inbox/conversation-list.tsx
@@ -187,8 +187,13 @@ export function ConversationList({
         </DropdownMenu>
       </div>
 
-      {/* Conversation Items */}
-      <ScrollArea className="flex-1">
+      {/* Conversation Items.
+          `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 ? (
           <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" />