diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index 34b555603..d10bfbd39 100644
Binary files a/examples/server/public/index.html.gz and b/examples/server/public/index.html.gz differ
diff --git a/examples/server/webui/src/components/ChatScreen.tsx b/examples/server/webui/src/components/ChatScreen.tsx
index 65e9885ec..f8a09d272 100644
--- a/examples/server/webui/src/components/ChatScreen.tsx
+++ b/examples/server/webui/src/components/ChatScreen.tsx
@@ -60,15 +60,23 @@ export default function ChatScreen() {
     }
   };
 
+  const hasCanvas = !!canvasData;
+
   return (
     <div
       className={classNames({
         'grid gap-8 grow': true,
-        'grid-cols-2': !!canvasData,
-        'grid-cols-1': !canvasData,
+        'grid-cols-1 lg:grid-cols-2': hasCanvas, // adapted for mobile
+        'grid-cols-1': !hasCanvas,
       })}
     >
-      <div className="flex flex-col w-full max-w-[900px] mx-auto">
+      <div
+        className={classNames({
+          'flex flex-col w-full max-w-[900px] mx-auto': true,
+          'hidden lg:flex': hasCanvas, // adapted for mobile
+          flex: !hasCanvas,
+        })}
+      >
         {/* chat messages */}
         <div id="messages-list" className="grow">
           <div className="mt-auto flex justify-center">