From e7d895193688606cc259f60bed446b2cd87b6efc Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Thu, 18 Jun 2026 10:24:40 +0300
Subject: [PATCH] fix(inbox): keep chat thread from overlapping contact sidebar
 (#257)

The page wrapper around the message thread already carries `min-w-0`
(issue #165), but the MessageThread root itself kept the default
`min-width: auto`. A single wide message (a long unbroken URL or word)
expanded the whole thread past its flex share, so at lg+ the chat
painted on top of the contact sidebar: outgoing bubbles were clipped on
the right and the hover toolbar floated over the Tags panel.

Adding `min-w-0` to the thread root lets it shrink to its column so the
bubbles' existing break-words / max-w-[75%] caps actually apply. Verified
in-browser: a 1272px-wide column went from 962px of overlap to 0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/inbox/message-thread.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/inbox/message-thread.tsx b/src/components/inbox/message-thread.tsx
index 26df162..70a4e48 100644
--- a/src/components/inbox/message-thread.tsx
+++ b/src/components/inbox/message-thread.tsx
@@ -721,7 +721,15 @@ export function MessageThread({
     : "Assign";
 
   return (
-    <div className={cn("flex flex-1 flex-col", DOODLE_BG_CLASSES)}>
+    // `min-w-0` is load-bearing: the page already puts min-w-0 on the
+    // thread's flex *wrapper* (issue #165), but this root keeps the
+    // default `min-width: auto`, so a single wide message (long unbroken
+    // URL/word) expands the whole thread past its flex share and the chat
+    // paints on top of the contact sidebar at lg+ — outgoing bubbles get
+    // clipped and the hover toolbar overlaps the Tags panel. Letting the
+    // root shrink lets the bubbles' break-words / max-w caps apply.
+    // Issue #257.
+    <div className={cn("flex min-w-0 flex-1 flex-col", DOODLE_BG_CLASSES)}>
       {/* Header — solid card surface sits on top of the doodle so the
           name/avatar/dropdowns stay legible. */}
       <div className="flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-3 sm:px-4">