fix: prevent CommentPopover from closing when interacting with ImageAnnotator (#226)

The click-outside handler matched only z-[90]/z-[100] classes, missing the
ImageAnnotator portal at z-[200]. Replace fragile z-index class matching with
a data-popover-layer attribute on all overlay portals.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: backnotprop

packages/ui/components/AttachmentsButton.tsx

@@ -242,12 +242,14 @@ export const AttachmentsButton: React.FC<AttachmentsButtonProps> = ({
           {/* Backdrop */}
           <div
             className="fixed inset-0 z-[90]"
+            data-popover-layer
             onClick={() => setIsOpen(false)}
           />
 
           {/* Popover content */}
           <div
             className="fixed z-[100] w-72 bg-card border border-border rounded-xl shadow-2xl p-3"
+            data-popover-layer
             style={{ top: position.top, left: position.left }}
             onClick={e => e.stopPropagation()}
           >

packages/ui/components/CommentPopover.tsx

@@ -87,9 +87,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       const target = e.target as Node | null;
       if (!target) return;
       if (popoverRef.current?.contains(target)) return;
-      // Don't close if clicking inside an AttachmentsButton portal (z-index 90+)
+      // Don't close if clicking inside a child portal (AttachmentsButton, ImageAnnotator, etc.)
       const el = target as HTMLElement;
-      if (el.closest?.('[class*="z-[90]"], [class*="z-[100]"]')) return;
+      if (el.closest?.('[data-popover-layer]')) return;
       onClose();
     };
 

packages/ui/components/ImageAnnotator/index.tsx

@@ -201,6 +201,7 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
   return (
     <div
       className="fixed inset-0 z-[200] flex items-center justify-center bg-background/90 backdrop-blur-sm"
+      data-popover-layer
       onClick={handleBackdropClick}
     >
       {/* Canvas with image and toolbar */}