From 82fa8d4e147d89a52005d3372a3e9b395003096d Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Wed, 4 Mar 2026 16:12:30 -0800
Subject: [PATCH] fix: prevent CommentPopover from closing when interacting
 with ImageAnnotator

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>
---
 packages/ui/components/AttachmentsButton.tsx    | 2 ++
 packages/ui/components/CommentPopover.tsx       | 4 ++--
 packages/ui/components/ImageAnnotator/index.tsx | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/components/AttachmentsButton.tsx b/packages/ui/components/AttachmentsButton.tsx
index fb31fd0..005cbbd 100644
--- a/packages/ui/components/AttachmentsButton.tsx
+++ b/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()}
           >
diff --git a/packages/ui/components/CommentPopover.tsx b/packages/ui/components/CommentPopover.tsx
index aa861cf..65df9f1 100644
--- a/packages/ui/components/CommentPopover.tsx
+++ b/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();
     };
 
diff --git a/packages/ui/components/ImageAnnotator/index.tsx b/packages/ui/components/ImageAnnotator/index.tsx
index 9e3de44..9486e02 100644
--- a/packages/ui/components/ImageAnnotator/index.tsx
+++ b/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 */}