canopy-ui 0.12.0 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.12.0",
+  "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 ? (

package/src/ui/dropdown-menu.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu"
+
+/** The z-index belongs on the POSITIONER. Base UI's positioner is the placed
+ *  element and forms its own stacking context, so a z-index on the popup alone
+ *  let the chat's sticky `z-10` bar paint over the menu and swallow the taps
+ *  meant for its items (2026-09-23). jsdom cannot compute stacking, so this
+ *  pins the class that makes it right. */
+describe("DropdownMenuContent", () => {
+  it("raises the positioner itself, not only the popup inside it", () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Share to Slack…</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    )
+    const popup = document.querySelector('[data-slot="dropdown-menu-content"]')!
+    expect(popup).toBeTruthy()
+    expect(popup.parentElement!.className).toContain("z-50")
+  })
+})

package/src/ui/dropdown-menu.tsx

@@ -21,14 +21,26 @@ function DropdownMenuTrigger({
   )
 }
 
+// The z-index goes on the POSITIONER, not only the popup. Base UI's positioner
+// is the element that is actually placed, and it forms its own stacking
+// context, so a `z-50` on the popup inside it is ranked only against the
+// positioner's own children. The menu then painted UNDER any positioned
+// z-index on the page (the chat's sticky `z-10` tool-call bar) and those items
+// could not be tapped (2026-09-23, the chat session menu on a phone).
+const POSITIONER_Z = "z-50"
+
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  align,
   ...props
-}: React.ComponentProps<typeof Menu.Popup> & { sideOffset?: number; align?: string }) {
+}: React.ComponentProps<typeof Menu.Popup> & {
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}) {
   return (
     <Menu.Portal>
-      <Menu.Positioner sideOffset={sideOffset}>
+      <Menu.Positioner className={POSITIONER_Z} sideOffset={sideOffset} align={align}>
         <Menu.Popup
           data-slot="dropdown-menu-content"
           className={cn(
@@ -191,7 +203,7 @@ function DropdownMenuSubContent({
 }: React.ComponentProps<typeof Menu.Popup>) {
   return (
     <Menu.Portal>
-      <Menu.Positioner>
+      <Menu.Positioner className={POSITIONER_Z}>
         <Menu.Popup
           data-slot="dropdown-menu-sub-content"
           className={cn(

package/src/ui/tooltip.tsx

@@ -37,7 +37,7 @@ function Tooltip({ label, children, delay = 300, side = "top", sideOffset = 6 }:
     <TooltipPrimitive.Root>
       <TooltipPrimitive.Trigger delay={delay} render={children} />
       <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset}>
+        <TooltipPrimitive.Positioner className="z-50" side={side} sideOffset={sideOffset}>
           <TooltipPrimitive.Popup
             className={cn(
               "z-50 max-w-xs rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",