mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-23 10:08:38 +02:00
fix: text overflow in chat bubbles - content not wrapping correctly
Add CSS properties to ensure text properly wraps within chat bubble boundaries: - Add break-words and overflow-hidden to user message bubbles - Add break-words, overflow-hidden, and [&_*]:break-words to TextContentBlock for proper word breaking in nested markdown elements Closes #83 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -669,7 +669,7 @@ function MessageBubble({
|
||||
|
||||
return (
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-[85%] rounded-lg bg-[#f9f7f5] dark:bg-muted px-4 py-3 text-[15px]">
|
||||
<div className="max-w-[85%] rounded-lg bg-[#f9f7f5] dark:bg-muted px-4 py-3 text-[15px] break-words overflow-hidden">
|
||||
{/* Render images first */}
|
||||
{imageBlocks.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
@@ -895,7 +895,7 @@ function TextContentBlock({ content }: { content: string }): React.JSX.Element |
|
||||
if (!content) return null
|
||||
|
||||
return (
|
||||
<div className="prose prose-invert max-w-none text-[15px] leading-[1.7]">
|
||||
<div className="prose prose-invert max-w-none text-[15px] leading-[1.7] break-words overflow-hidden [&_*]:break-words">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]} components={TEXT_MARKDOWN_COMPONENTS}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
|
||||
Reference in New Issue
Block a user