Ayuriel/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance chat message styling for better text handling

Browse Source 
- Added `overflow-wrap: anywhere` and `word-break: break-word` to `.chat-prose` for improved text wrapping.
- Updated chat message component styles to include `min-w-0` and `overflow-hidden` for better layout control.
- Ensured consistent text breaking behavior across various message elements.
This commit is contained in:
kumarabhirup 2026-02-16 00:45:28 -08:00
parent dee323b7ad
commit 371035978c
No known key found for this signature in database
GPG Key ID: DB7CA2289CAB0167
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/app/components/chat-message.tsx
View File

@ -653,7 +653,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
return (
<div className="flex justify-end py-2">
<div
className="font-bookerly max-w-[80%] rounded-2xl rounded-br-sm px-3 py-2 text-sm leading-6"
className="font-bookerly max-w-[80%] min-w-0 rounded-2xl rounded-br-sm px-3 py-2 text-sm leading-6 overflow-hidden break-all"
style={{
background: "var(--color-user-bubble)",
color: "var(--color-user-bubble-text)",
@ -667,7 +667,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
}
/>
{attachmentInfo.message && (
<p className="whitespace-pre-wrap">
<p className="whitespace-pre-wrap break-all">
{
attachmentInfo.message
}
@ -675,7 +675,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
)}
</>
) : (
<p className="whitespace-pre-wrap">
<p className="whitespace-pre-wrap break-all">
{textContent}
</p>
)}
@ -691,7 +691,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
// Assistant: free-flowing text, left-aligned, NO bubble
return (
<div className="py-3 space-y-2">
<div className="py-3 space-y-2 min-w-0 overflow-hidden">
<AnimatePresence initial={false}>
{segments.map((segment, index) => {
if (segment.type === "text") {
@ -703,7 +703,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
return (
<div
key={index}
className="font-bookerly flex items-start gap-2 rounded-xl px-3 py-2 text-[13px] leading-relaxed"
className="font-bookerly flex items-start gap-2 rounded-xl px-3 py-2 text-[13px] leading-relaxed overflow-hidden"
style={{
background: `color-mix(in srgb, var(--color-error) 6%, var(--color-surface))`,
color: "var(--color-error)",
@ -743,7 +743,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
/>
</svg>
</span>
<span className="whitespace-pre-wrap">
<span className="whitespace-pre-wrap break-all min-w-0">
{errorMatch[1].trim()}
</span>
</div>
@ -760,7 +760,7 @@ export const ChatMessage = memo(function ChatMessage({ message, isStreaming }: {
initial={{ opacity: 0, y: 4 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className="chat-prose font-bookerly text-sm whitespace-pre-wrap"
className="chat-prose font-bookerly text-sm whitespace-pre-wrap break-all"
style={{ color: "var(--color-text)" }}
>
{segment.text}

4
apps/web/app/globals.css
View File

@ -863,6 +863,8 @@ a,
.chat-prose {
color: var(--color-text);
line-height: 1.8;
overflow-wrap: anywhere;
word-break: break-word;
}
.chat-prose > *:first-child {
@ -978,6 +980,8 @@ a,
border: 1px solid var(--color-border);
border-radius: 0.375rem;
padding: 0.15em 0.35em;
overflow-wrap: anywhere;
word-break: break-all;
}