fix(PopoverContainer, Overlay): out of view close fix + increase default zIndex for Overlay

[dreamwasp]

Overview

1. PopoverContainer visibility fix: PopoverContainer now properly closes when its targetRef scrolls out of view, even when inside scrollable parent containers (e.g., tables with sticky headers). This is tied to a optional prop to be backwards compatible.
2. DataTable scroll shadow fix: Fixed bug where scroll shadow indicator appeared on initial load even when the entire table was visible
3. Performance improvements: Optimized scrollability checks to only run when needed (when shadow and scrollable props are enabled)
4. zIndex improvements: Updated Modal/Popover/Overlay default zIndex to 3 to appear above table headers etc\

PR Checklist

• [ ] Related to designs:
• [x] Related to JIRA ticket: GMT-222
• [x] I have run this code to verify it works
• [x] This PR includes unit tests for the code change
• [x] This PR includes testing instructions tests for the code change
• [x] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Go to story Organisms/Lists & Tables/DataTable/WithFloatingMenu
2. Click the kebab menu icon on any row to open the popover menu, then scroll the table so the row scrolls out of view - verify the menu closes automatically
3. On initial page load, verify the scroll shadow does NOT appear if the entire table is visible (scroll horizontally to see it appear when needed)
4. Click "View Details" in the menu to open the modal - verify it appears above the table header (header should be behind the modal shroud/overlay)
5. Rinse + repeat for dark mode

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud[bot]]

View your CI Pipeline Execution ↗ for commit 195e8c24fec714883a54cb7e1c3898d133a3878c

---

☁️ Nx Cloud last updated this comment at 2025-11-10 15:53:04 UTC

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[github-actions[bot]]

🚀 Styleguide deploy preview ready!

Preview URL: https://69120af82c14c9f671f651f1--gamut-preview.netlify.app Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69120af82c14c9f671f651f1