From 81e78a622f0861d9d55d62b8396c2e259fd99a61 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Mon, 30 Mar 2026 01:03:11 +0200
Subject: [PATCH] fix(chat): newlines not rendered

---
 .../src/components/app/ChatPanel/message.tsx  | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/app/ChatPanel/message.tsx b/apps/web/src/components/app/ChatPanel/message.tsx
index 735f074..484c361 100644
--- a/apps/web/src/components/app/ChatPanel/message.tsx
+++ b/apps/web/src/components/app/ChatPanel/message.tsx
@@ -73,13 +73,25 @@ function UsernameRow({ user, displayName }: { user?: User; displayName?: string
 
   return (
     <TooltipProvider>
-      {user?.isBot && <TooltipIcon icon={Bot} label="Bot" className="text-muted-foreground mr-[0.3em]" />}
-      {role && <TooltipIcon icon={role.icon} label={role.label} className={cn(role.className, "mr-[0.3em]")} />}
+      {user?.isBot && (
+        <TooltipIcon icon={Bot} label="Bot" className="text-muted-foreground mr-[0.3em]" />
+      )}
+      {role && (
+        <TooltipIcon
+          icon={role.icon}
+          label={role.label}
+          className={cn(role.className, 'mr-[0.3em]')}
+        />
+      )}
       {user?.isPlatformAdmin && (
-        <TooltipIcon icon={ShieldAlert} label="Platform Admin" className="text-destructive mr-[0.3em]" />
+        <TooltipIcon
+          icon={ShieldAlert}
+          label="Platform Admin"
+          className="text-destructive mr-[0.3em]"
+        />
       )}
       <span className="font-semibold text-primary">{displayName}</span>
-      <span className="font-normal text-muted-foreground select-none">:{' '}</span>
+      <span className="font-normal text-muted-foreground select-none">: </span>
     </TooltipProvider>
   );
 }
@@ -116,7 +128,7 @@ function ReportDialog({
           <div className="text-sm text-muted-foreground rounded-md border p-3 bg-muted/30">
             <p className="font-medium text-foreground mb-1">Reported user</p>
             <p>{displayName}</p>
-            <p className="mt-2">{message}</p>
+            <p className="mt-2 whitespace-pre-wrap break-words">{message}</p>
           </div>
           <div>
             <label className="text-sm font-medium">Reason</label>
@@ -221,7 +233,9 @@ export function Message({
             style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}
           >
             <UsernameRow user={user} displayName={displayName} />
-            <EmojiRenderer text={message} emojiMap={emojiMap} />
+            <span className="whitespace-pre-wrap break-words">
+              <EmojiRenderer text={message} emojiMap={emojiMap} />
+            </span>
           </div>
           {type === 'message' && user?.id && (
             <MessageActionsMenu