From 62b04d05a8772a240777cb1fa10969d590a07c97 Mon Sep 17 00:00:00 2001 From: Xander Date: Fri, 31 Jul 2026 10:41:21 +0100 Subject: [PATCH 1/3] fix(conversations): wrap long lines in the compose ticket editor The editable SupportEditor content lacked overflow-wrap, so a long unbreakable string (URL/token) in the "New outbound ticket" compose box wouldn't break and grew the editor and its modal wider until hitting the modal max width. The read-only SupportRichContentPreview already handles this with overflow-wrap: anywhere; mirror that rule on the editor content. Generated-By: PostHog Code Task-Id: 3495c5cc-3a7c-43be-a332-be5af74b4699 --- .../frontend/components/Editor/SupportEditor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/products/conversations/frontend/components/Editor/SupportEditor.scss b/products/conversations/frontend/components/Editor/SupportEditor.scss index fc0a9f52c73f..707944a44a14 100644 --- a/products/conversations/frontend/components/Editor/SupportEditor.scss +++ b/products/conversations/frontend/components/Editor/SupportEditor.scss @@ -54,6 +54,10 @@ .SupportEditor__content { display: flex; flex-direction: column; + + // Break long unbreakable strings (URLs, tokens) so typing one can't grow the + // editor (and its modal) wider — matches .SupportRichContentPreview below. + overflow-wrap: anywhere; background-color: var(--color-bg-fill-input); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); From e06946eedc3be182a59b0cbacc2f8ddf256fa380 Mon Sep 17 00:00:00 2001 From: Xander Date: Fri, 31 Jul 2026 10:51:20 +0100 Subject: [PATCH 2/3] fix(conversations): cap compose ticket modal width so it can't grow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The compose wrapper used min-w-[500px], a floor with no ceiling. Since LemonModal is width: fit-content (max-width: 90%), the message paragraph laid out at its max-content width and ballooned the modal toward 90% of the viewport as you typed — even with ordinary spaced text, not just unbreakable strings. Give the wrapper a definite width (w-[500px] max-w-full) so it stays bounded and the text wraps. Generated-By: PostHog Code Task-Id: 3495c5cc-3a7c-43be-a332-be5af74b4699 --- .../frontend/components/ComposeTicket/ComposeTicketModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/products/conversations/frontend/components/ComposeTicket/ComposeTicketModal.tsx b/products/conversations/frontend/components/ComposeTicket/ComposeTicketModal.tsx index 1b15b78e1e01..fe039f1da0e6 100644 --- a/products/conversations/frontend/components/ComposeTicket/ComposeTicketModal.tsx +++ b/products/conversations/frontend/components/ComposeTicket/ComposeTicketModal.tsx @@ -57,7 +57,7 @@ export function ComposeTicketModal(): JSX.Element | null { } > -
+
Date: Fri, 31 Jul 2026 10:57:08 +0100 Subject: [PATCH 3/3] chore(conversations): drop the overflow-wrap comment in SupportEditor Generated-By: PostHog Code Task-Id: 3495c5cc-3a7c-43be-a332-be5af74b4699 --- .../frontend/components/Editor/SupportEditor.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/products/conversations/frontend/components/Editor/SupportEditor.scss b/products/conversations/frontend/components/Editor/SupportEditor.scss index 707944a44a14..dd26d4ab6bcc 100644 --- a/products/conversations/frontend/components/Editor/SupportEditor.scss +++ b/products/conversations/frontend/components/Editor/SupportEditor.scss @@ -54,9 +54,6 @@ .SupportEditor__content { display: flex; flex-direction: column; - - // Break long unbreakable strings (URLs, tokens) so typing one can't grow the - // editor (and its modal) wider — matches .SupportRichContentPreview below. overflow-wrap: anywhere; background-color: var(--color-bg-fill-input); border-top-left-radius: var(--radius);