diff --git a/packages/ui/src/components/message-list.tsx b/packages/ui/src/components/message-list.tsx
index aa8d321f..f02d963b 100644
--- a/packages/ui/src/components/message-list.tsx
+++ b/packages/ui/src/components/message-list.tsx
@@ -55,7 +55,7 @@ export const MessageList = memo(function MessageList({ messages, streamingIds }:
   }, [messages])
 
   return (
-    <div className="relative p-6 px-10 max-w-4xl mx-auto">
+    <div className="relative p-6 px-4 sm:px-10 max-w-4xl mx-auto">
       {messages.map((msg) => {
         // ToolResult messages → render as tool execution item
         if (msg.role === "toolResult") {