From df06fe3288dc0b4a8da03aa4854b92c9278fe48c Mon Sep 17 00:00:00 2001
From: Adam Horowitz <ahorowi4@gmail.com>
Date: Wed, 11 Feb 2026 12:07:07 -0500
Subject: [PATCH] fix(preview): annotation delete modal z-index

Fixed z-index issue where the annotation delete confirmation modal
was hidden behind other elements. The className with z-index styling
was applied to the inner div but not the TetherComponent wrapper,
causing the modal to be positioned incorrectly.

Moved the className to tetherProps to match the pattern used in
Comment.js and Task.js components. Added test coverage to prevent
regression.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../annotations/AnnotationActivity.js         |  3 ++-
 .../__tests__/AnnotationActivity.test.js      | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js b/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js
index 1d631f5713..d8becda3a4 100644
--- a/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js
+++ b/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js
@@ -123,6 +123,7 @@ const AnnotationActivity = ({
         : { ...linkMessage, values: { number: linkValue } };
     const tetherProps = {
         attachment: 'top right',
+        className: 'bcs-AnnotationActivity-deleteConfirmationModal',
         constraints: [{ to: 'scrollParent', attachment: 'together' }],
         targetAttachment: 'bottom right',
     };
@@ -227,7 +228,7 @@ const AnnotationActivity = ({
                     )}
                     renderElement={ref => {
                         return isConfirmingDelete ? (
-                            <div ref={ref} className="bcs-AnnotationActivity-deleteConfirmationModal">
+                            <div ref={ref}>
                                 <DeleteConfirmation
                                     data-resin-component={ACTIVITY_TARGETS.ANNOTATION_OPTIONS}
                                     isOpen={isConfirmingDelete}
diff --git a/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js b/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js
index bbbd71f4cb..bc2af5961b 100644
--- a/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js
+++ b/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
+import TetherComponent from 'react-tether';
 
 import AnnotationActivity from '../AnnotationActivity';
 import AnnotationActivityMenu from '../AnnotationActivityMenu';
@@ -288,6 +289,24 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
             expect(onDelete).toHaveBeenCalledWith({ id: mockAnnotation.id, permissions });
             expect(wrapper.exists(DeleteConfirmation)).toBe(false);
         });
+
+        test('should apply correct className to TetherComponent for z-index styling', () => {
+            const item = {
+                ...mockAnnotation,
+                permissions: { can_delete: true },
+            };
+
+            const wrapper = getWrapper({ item });
+
+            const tetherComponent = wrapper.find(TetherComponent);
+            expect(tetherComponent.exists()).toBe(true);
+            // Find the TetherComponent that has the delete confirmation modal className
+            const modalTetherComponent = tetherComponent.findWhere(
+                node => node.prop('className') === 'bcs-AnnotationActivity-deleteConfirmationModal',
+            );
+            expect(modalTetherComponent.exists()).toBe(true);
+            expect(modalTetherComponent.prop('className')).toBe('bcs-AnnotationActivity-deleteConfirmationModal');
+        });
     });
 
     describe('SelectableActivityCard', () => {