diff --git a/frontend/src/chat.css b/frontend/src/chat.css
index 70666447..253a43d5 100644
--- a/frontend/src/chat.css
+++ b/frontend/src/chat.css
@@ -609,6 +609,7 @@
 .markdown-body table td {
   padding: 6px 13px;
   border: 1px solid var(--color-border-default);
+  white-space: nowrap;
 }
 
 .markdown-body table tr {
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index 43813071..fb5f8578 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -269,10 +269,16 @@ function ResponsiveTable({ children, className, ...rest }: JSX.IntrinsicElements
   const { node, inline, ...safeRest } = rest as Record<string, unknown>;
 
   return (
-    <div className="overflow-x-auto max-w-full w-0 min-w-full rounded-md border border-border/50">
-      <table className={className} {...(safeRest as object)}>
-        {children}
-      </table>
+    <div className="my-4 w-full max-w-full overflow-hidden">
+      <div className="overflow-x-auto overflow-y-hidden rounded-md border border-border/50 shadow-sm">
+        <table
+          className={className || ""}
+          style={{ width: "max-content" }}
+          {...(safeRest as object)}
+        >
+          {children}
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/routes/_auth.chat.$chatId.tsx b/frontend/src/routes/_auth.chat.$chatId.tsx
index 6afb14f9..d5baf8cf 100644
--- a/frontend/src/routes/_auth.chat.$chatId.tsx
+++ b/frontend/src/routes/_auth.chat.$chatId.tsx
@@ -102,7 +102,9 @@ function UserMessage({ message, chatId }: { message: ChatMessage; chatId: string
         <div>
           <UserIcon />
         </div>
-        <div className="flex flex-col gap-2">{renderContent(message.content, chatId)}</div>
+        <div className="flex flex-col gap-2 min-w-0 flex-1 overflow-hidden">
+          {renderContent(message.content, chatId)}
+        </div>
       </div>
     </div>
   );
@@ -295,7 +297,7 @@ function SystemMessage({
         <div>
           <AsteriskIcon />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 min-w-0 flex-1 overflow-hidden">
           <Markdown content={text} loading={loading} chatId={chatId} />
           <div className="flex gap-2 items-center">
             <Button
@@ -790,7 +792,7 @@ END OF INSTRUCTIONS`;
         )}
         <div
           ref={chatContainerRef}
-          className="flex-1 min-h-0 overflow-y-auto flex flex-col relative"
+          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden flex flex-col relative"
         >
           <div className="mt-4 md:mt-8 w-full h-10 flex items-center justify-center relative">
             {/* Mobile new chat button */}