canopy-ui 0.12.1 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "type": "module",
   "repository": {
     "type": "git",

package/src/chat/ChatPanel.tsx

@@ -179,7 +179,10 @@ export function ChatPanel({
           header, i.e. unreachable. Pinning keeps "Load earlier"/"Load full"
           always visible. */}
       {historySlot}
-      <div ref={containerRef} onScroll={onScroll} className="flex-1 overflow-y-auto">
+      {/* overflow-x-hidden: `overflow-y: auto` alone computes overflow-x to
+          auto, so anything wider than the column made the transcript scroll
+          sideways into empty space. Wide content scrolls inside its own box. */}
+      <div ref={containerRef} onScroll={onScroll} className="flex-1 overflow-x-hidden overflow-y-auto">
         <MessageList
           messages={state.messages}
           emptyState={emptyState}

package/src/chat/MessageItem.tsx

@@ -119,8 +119,13 @@ export function MessageItem({
   const showThinking =
     (isPending || isStreaming) && message.role === "assistant" && !text;
   return (
+    // `overflow-wrap:anywhere` so one unbreakable token — a long path, a URL,
+    // inline code — wraps inside the bubble. Without it the token overflowed
+    // `max-w-[80%]` and made the whole transcript scroll sideways into empty
+    // space on a phone (2026-09-24). Tables and code blocks keep their own
+    // horizontal scroll; this only affects running text.
     <div
-      className={`my-2 max-w-[80%] rounded-2xl px-4 py-2 ${bubbleClass}`}
+      className={`my-2 min-w-0 max-w-[80%] rounded-2xl px-4 py-2 [overflow-wrap:anywhere] ${bubbleClass}`}
       aria-live={isStreaming || isPending ? "polite" : undefined}
     >
       {showThinking ? (