From 2b8123462a1034c6f577620b08c4ec01b2a5f5bd Mon Sep 17 00:00:00 2001
From: Laurent Paoletti <lp@providenz.fr>
Date: Mon, 23 Feb 2026 13:33:39 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(front)=20fix=20dark=20mode=20styli?=
 =?UTF-8?q?ng=20on=20chat=20messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Laurent Paoletti <lp@providenz.fr>
---
 CHANGELOG.md                                  |  1 +
 .../features/chat/components/MessageItem.tsx  | 20 ++++++++-----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08cab4e..1383a27 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to
 - 💚(docker) vendor mime.types file instead of fetching from Apache SVN
 - 🐛(front) fix math formulas and carousel translations
 - 🐛(helm) reverse liveness and readiness for backend deployment
+- 🐛(front) fix dark mode styling on chat messages
 
 ## [0.0.13] - 2026-02-09
 
diff --git a/src/frontend/apps/conversations/src/features/chat/components/MessageItem.tsx b/src/frontend/apps/conversations/src/features/chat/components/MessageItem.tsx
index 6cc6327..66199a0 100644
--- a/src/frontend/apps/conversations/src/features/chat/components/MessageItem.tsx
+++ b/src/frontend/apps/conversations/src/features/chat/components/MessageItem.tsx
@@ -15,14 +15,14 @@ import { ToolInvocationItem } from '@/features/chat/components/ToolInvocationIte
 // Memoized blocks list to prevent parent re-renders from causing block remounts
 const BlocksList = React.memo(
   ({ blocks, pending }: { blocks: string[]; pending: string }) => (
-    <div>
+    <>
       {/* key={index} is safe here: blocks are append-only during streaming
          and a completed block's content never changes once finalized. */}
       {blocks.map((block, index) => (
         <CompletedMarkdownBlock key={index} content={block} />
       ))}
       {pending && <RawTextBlock content={pending} />}
-    </div>
+    </>
   ),
   (prev, next) => {
     const lengthChanged = prev.blocks.length !== next.blocks.length;
@@ -299,16 +299,12 @@ const MessageItemComponent: React.FC<MessageItemProps> = ({
             </Box>
           )}
         <Box
-          $radius="8px"
-          $width={`${message.role === 'user' ? 'auto' : '100%'}`}
-          $maxWidth="100%"
-          $padding={`${message.role === 'user' ? '12px' : '0'}`}
-          $margin={{ vertical: 'base' }}
-          $background={`${message.role === 'user' ? '#EEF1F4' : 'white'}`}
-          $css={`
-            display: inline-block;
-            float: right;
-            ${shouldApplyStreamingHeight ? `min-height: ${streamingMessageHeight}px;` : ''}`}
+          className={`chatMessage ${message.role === 'user' ? 'chatMessage--user' : 'chatMessage--assistant'}`}
+          style={
+            shouldApplyStreamingHeight
+              ? { minHeight: `${streamingMessageHeight}px` }
+              : undefined
+          }
         >
           {/* Message content */}
           {message.content && (