fix(preview): annotation delete modal z-index

[ahorowitz123]

Summary

Fixed z-index issue where the annotation delete confirmation modal was hidden behind other elements in the content sidebar.

Problem

The delete confirmation modal was being rendered but not visible when users attempted to delete an annotation. The modal appeared behind other content due to incorrect z-index application.

Root Cause

The bcs-AnnotationActivity-deleteConfirmationModal class with z-index: $overlay-z-index was applied to the inner div inside renderElement, but the outer TetherComponent wrapper div did not have the z-index applied, causing incorrect layering.

Solution

Moved the className to the tetherProps object so it applies to the TetherComponent wrapper element. This matches the established pattern used in Comment.js and Task.js components.

Changes

• AnnotationActivity.js: Added className to tetherProps object
• AnnotationActivity.test.js: Added test to verify TetherComponent has correct className prop

Test Plan

• ✅ All existing tests pass (44/44)
• ✅ New test verifies className is applied to TetherComponent
• ✅ Manual testing: Delete confirmation modal now displays correctly above other content

Files Changed

• src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js
• src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js

Summary by CodeRabbit

• Bug Fixes

  • Fixed styling and z-index layering for the delete confirmation modal in the annotation activity feed to ensure proper visual presentation.

• Tests

  • Added test coverage for delete confirmation modal styling to verify correct styling behavior.

[coderabbitai]

Walkthrough

This pull request relocates a CSS class (bcs-AnnotationActivity-deleteConfirmationModal) from a wrapper div to the tether props object in the delete confirmation modal, and adds test coverage to verify the className is correctly propagated for z-index styling purposes.

Changes

Cohort / File(s)	Summary
Delete Confirmation Modal Styling src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js	Moved className property from wrapper div to tetherProps object for delete confirmation modal styling.
Test Coverage src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js	Added import of TetherComponent and new test assertion verifying correct className propagation in the tethered delete confirmation modal.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Suggested labels

ready-to-merge

Suggested reviewers

• kduncanhsu
• jpan-box

Poem

🐰 A classroom moved, so neat and clean,
The tether claims its rightful sheen,
With z-index sorted, modal bright,
Our tests now guard the modal's flight,
Small hops, big wins—the code's delight!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing a z-index issue with the annotation delete modal in the preview component.
Description check	✅ Passed	The description is comprehensive and well-structured with clear sections covering summary, problem, root cause, solution, changes, and test plan.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js (1)

293-309: Test validates the fix but has a redundant assertion.

Line 308 re-checks the same className prop that findWhere on Lines 304-306 already matched against. Consider dropping it to keep the test concise.

Proposed simplification

             const modalTetherComponent = tetherComponent.findWhere(
                 node => node.prop('className') === 'bcs-AnnotationActivity-deleteConfirmationModal',
             );
             expect(modalTetherComponent.exists()).toBe(true);
-            expect(modalTetherComponent.prop('className')).toBe('bcs-AnnotationActivity-deleteConfirmationModal');

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[mergify]

Merge Queue Status

Rule: Automatic strict merge

---

• ✅ Entered queue — 2026-02-11 17:39 UTC
• ✅ Checks passed · in-place
• ✅ Merged — 2026-02-11 17:39 UTC · at df06fe3288dc0b4a8da03aa4854b92c9278fe48c

This pull request spent 7 seconds in the queue, with no time running CI.

Required conditions to merge

• #approved-reviews-by >= 1 [🛡 GitHub branch protection]
  • fix(preview): annotation delete modal z-index #4445
• #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
  • fix(preview): annotation delete modal z-index #4445
• #review-threads-unresolved = 0 [🛡 GitHub branch protection]
  • fix(preview): annotation delete modal z-index #4445
• branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
  • fix(preview): annotation delete modal z-index #4445
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request