From 28b5a8aa6a5e1ede753e3139e0d9b4c132244f8f Mon Sep 17 00:00:00 2001
From: Victor-root <65600486+Victor-root@users.noreply.github.com>
Date: Tue, 12 May 2026 17:35:15 +0200
Subject: [PATCH] fix(ui): make message cards responsive

Allow the Messages page to use more horizontal space while sizing individual message cards based on their content.

Short text messages keep the compact width, while messages with wide content such as code or log blocks can expand up to the available page width.

Keep preformatted content unwrapped with internal horizontal scrolling, matching the existing code block behavior.
---
 ui/src/message/Message.tsx  | 5 +++++
 ui/src/message/Messages.tsx | 1 +
 2 files changed, 6 insertions(+)

diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 9ea99f5a..bd4fc8ce 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -80,6 +80,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
         },
         '& pre': {
             overflow: 'auto',
+            maxWidth: '100%',
             borderRadius: '0.25em',
             backgroundColor:
                 theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
@@ -168,6 +169,10 @@ const Message = ({
                 style={{
                     display: 'flex',
                     flexWrap: 'wrap',
+                    width: 'fit-content',
+                    minWidth: 'min(700px, 100%)',
+                    maxWidth: '100%',
+                    margin: '0 auto',
                     borderLeftColor: priorityColor(priority),
                     borderLeftWidth: 6,
                     borderLeftStyle: 'solid',
diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
index 02c582ff..97493703 100644
--- a/ui/src/message/Messages.tsx
+++ b/ui/src/message/Messages.tsx
@@ -115,6 +115,7 @@ const Messages = observer(() => {
     return (
         <DefaultPage
             title={name}
+            maxWidth={1600}
             rightControl={
                 <div>
                     {app && (