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

fix(inbox): keep chat thread from overlapping contact sidebar (#257)

Browse Source 
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>
This commit is contained in:
Arnas Donauskas 2026-06-18 10:24:40 +03:00
parent b56e6b6e3a
commit e7d8951936
No known key found for this signature in database
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/inbox/message-thread.tsx
View File

@ -721,7 +721,15 @@ export function MessageThread({
: "Assign"; : "Assign";
return ( 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 {/* Header — solid card surface sits on top of the doodle so the
name/avatar/dropdowns stay legible. */} 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"> <div className="flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-3 sm:px-4">