fix(chat): make mobile user message bubbles shrink to content naturally

sdcb · sdcb · commit 5b6a5ebf3a4a · 2026-03-26T10:07:48.000+08:00
diff --git a/src/FE/components/ChatMessage/ChatMessage.tsx b/src/FE/components/ChatMessage/ChatMessage.tsx
@@ -89,7 +89,7 @@ export const ChatMessage: FC<Props> = memo(
                       <div
                         key={'user-message-' + index}
                         className={cn(
-                          'prose !w-full dark:prose-invert rounded-r-md group',
+                          'w-full rounded-r-md group',
                           'sm:w-[50vw] xl:w-[50vw]',
                           index > 0 && 'mt-4',
                         )}
diff --git a/src/FE/components/ChatMessage/UserMessage.tsx b/src/FE/components/ChatMessage/UserMessage.tsx
@@ -306,7 +306,7 @@ const UserMessage = (props: Props) => {
             </div>
           </div>
         ) : (
-          <div className="ml-auto w-fit max-w-[92%] bg-card py-2 px-3 rounded-md overflow-visible chat-message-bg sm:max-w-full">
+          <div className="ml-auto bg-card py-2 px-3 rounded-md overflow-visible chat-message-bg">
             <div className="flex flex-wrap gap-2 justify-end text-right">
               {fileContents.map((file: any, index) => {
                 return (
@@ -321,7 +321,7 @@ const UserMessage = (props: Props) => {
             <div className={`relative group/user-message-text ${fileContents.length > 0 ? 'mt-2' : ''}`}>
               <div
                 ref={textContentRef}
-                className="prose !w-auto max-w-full whitespace-pre-wrap dark:prose-invert text-sm"
+                className="max-w-full whitespace-pre-wrap break-words text-sm leading-[1.6]"
                 style={
                   collapsedMaxHeight
                     ? {
