From 16b612cfcfda48e302ca6ddb5905a0282f854873 Mon Sep 17 00:00:00 2001
From: Ryker_Feng <90562015+18062706139fcz@users.noreply.github.com>
Date: Fri, 24 Jul 2026 22:49:52 +0800
Subject: [PATCH] fix(frontend): apply message image maxWidth via inline style
 (#4446)

---
 .../workspace/messages/message-list-item.tsx         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index 2f4d98124..ccdbe5f80 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -205,17 +205,22 @@ function MessageImage({
 }) {
   if (!src) return null;
 
-  const imgClassName = cn("overflow-hidden rounded-lg", `max-w-[${maxWidth}]`);
+  // `maxWidth` is applied inline rather than through a `max-w-[${maxWidth}]`
+  // class: Tailwind's JIT only generates utilities it can find as literal
+  // source tokens, so an interpolated arbitrary value would never be emitted.
+  const imgClassName = cn("overflow-hidden rounded-lg", props.className);
+  const imgStyle: React.CSSProperties = { maxWidth, ...props.style };
 
   if (typeof src !== "string") {
     return (
       <img
+        {...props}
         className={imgClassName}
+        style={imgStyle}
         src={src}
         alt={alt}
         loading="lazy"
         decoding="async"
-        {...props}
       />
     );
   }
@@ -225,12 +230,13 @@ function MessageImage({
   return (
     <a href={url} target="_blank" rel="noopener noreferrer">
       <img
+        {...props}
         className={imgClassName}
+        style={imgStyle}
         src={url}
         alt={alt}
         loading="lazy"
         decoding="async"
-        {...props}
       />
     </a>
   );