fix: update temporary z-index for Popover, Flyout, and Toast by LinKCoding · Pull Request #3403 · Codecademy/gamut

LinKCoding · 2026-07-31T16:20:56Z

Overview

Raises temporary z-index values so Popover-related surfaces and toasts sit above Overlay (default z-index 3) until a shared scale lands in GM-624.

Set BodyPortal zIndex={5} on Popover portal paths in Popover/elements.tsx (animated and non-animated)
Set BodyPortal zIndex={5} on PopoverContainer when content is portaled
Set BodyPortal zIndex={4} on Toaster
Added a gamut patch version plan for the temporary z-index changes

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1720
Version plan added/updated (or not needed)
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

Go to Flyout, hover over the close button and see the tooltip appear
Go to the Toaster story; hover over the close button and see that the Tooltip appears above the toast and isn't hidden behind any other Toast
Just in case, go to Popover and PopoverContainer; see that the rendering has the layers correct
Repeat the Popover / PopoverContainer / Toaster checks in dark mode and confirm stacking still looks correct.
Spot-check with VoiceOver that popover and toast content remains reachable/announced as before (no regression from the portal z-index change).
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-07-31T16:22:30Z

View your CI Pipeline Execution ↗ for commit 7dc0b9f

☁️ Nx Cloud last updated this comment at 2026-08-07 15:38:48 UTC

codecov · 2026-07-31T16:24:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.44%. Comparing base (8a6a54c) to head (7dc0b9f).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3403      +/-   ##
==========================================
- Coverage   90.86%   90.44%   -0.43%     
==========================================
  Files         403      275     -128     
  Lines        6681     5765     -916     
  Branches     2169     1915     -254     
==========================================
- Hits         6071     5214     -857     
+ Misses        601      542      -59     
  Partials        9        9

Flag	Coverage Δ
main	`?`
pull-request	`90.44% <100.00%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Cherry-picked content from 11d9427 on kl-gmt-1676-gamut-skills, which had the same edit committed to the wrong branch. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

codecademydev · 2026-08-07T15:40:28Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`72.5.2-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.12-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.17-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-kit`	`3.0.15-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.36-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-styles`	`20.1.1-alpha.6d4dbc.0`	npm	diff
`@codecademy/gamut-tests`	`6.0.7-alpha.6d4dbc.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.6d4dbc.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.6d4dbc.0`	npm	diff

github-actions · 2026-08-07T15:42:43Z

🚀 Styleguide deploy preview ready!

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

Copilot

Pull request overview

This PR raises temporary BodyPortal z-index values so Popover-based surfaces (including Flyout tooltip paths) and Toaster reliably render above Overlay (default zIndex={3}) until GM-624 introduces a shared z-index scale.

Changes:

Set BodyPortal zIndex={5} for portalled Popover and portalled PopoverContainer.
Set BodyPortal zIndex={4} for Toaster so toasts render above Overlay.
Document the temporary Tier-2 ordering in the gamut-z-index agent skill and add an Nx release version plan entry.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/gamut/src/Toaster/index.tsx	Raises the Toaster portal z-index to 4 to clear Overlay portals.
packages/gamut/src/PopoverContainer/PopoverContainer.tsx	Raises the portalled PopoverContainer portal z-index to 5.
packages/gamut/src/Popover/elements.tsx	Raises Popover’s portal z-index to 5 in both animated and non-animated portal paths.
packages/gamut/agent-tools/skills/gamut-z-index/SKILL.md	Updates internal documentation to include the new temporary Tier-2 ordering and references.
.nx/version-plans/version-plan-1785874968484.md	Adds a patch version plan for the temporary z-index changes.

+gamut: patch
+---
+
+Set temporary zindex values for Popover related components


+    // TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
+    <BodyPortal zIndex={5} {...rest} />


+    // TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
+    <BodyPortal zIndex={4}>


+  // TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
+  return <BodyPortal zIndex={5}>{content}</BodyPortal>;


aresnik11

LGTM!

LinKCoding force-pushed the kl-gmt-1720-gamut-tooltip-zindex branch 2 times, most recently from b91ecdf to 368a85b Compare August 4, 2026 20:16

LinKCoding changed the title ~~update z-indexes to temp values~~ fix(Flyout): update z-indexes to temp values Aug 4, 2026

LinKCoding added 2 commits August 6, 2026 11:00

update z-indexes to temp values

b8e1fd9

add release plan

2b3d185

LinKCoding force-pushed the kl-gmt-1720-gamut-tooltip-zindex branch from 1511526 to 2b3d185 Compare August 6, 2026 15:00

LinKCoding changed the title ~~fix(Flyout): update z-indexes to temp values~~ fix: update temporary z-index for Popover, Flyout, and Toast Aug 7, 2026

docs(gamut-z-index): add skill covering the temporary z-index overrides

7dc0b9f

Cherry-picked content from 11d9427 on kl-gmt-1676-gamut-skills, which had the same edit committed to the wrong branch. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

LinKCoding marked this pull request as ready for review August 7, 2026 16:21

LinKCoding requested a review from a team as a code owner August 7, 2026 16:21

LinKCoding requested review from dreamwasp and a lite review from Copilot August 7, 2026 16:21

Copilot started reviewing on behalf of LinKCoding August 7, 2026 16:22 View session

Copilot AI reviewed Aug 7, 2026

View reviewed changes

aresnik11 approved these changes Aug 12, 2026

View reviewed changes

LinKCoding merged commit d206729 into main Aug 13, 2026
18 checks passed

LinKCoding deleted the kl-gmt-1720-gamut-tooltip-zindex branch August 13, 2026 13:33

Navigation Menu

Uh oh!

fix: update temporary z-index for Popover, Flyout, and Toast - #3403

fix: update temporary z-index for Popover, Flyout, and Toast#3403
LinKCoding merged 3 commits into
mainfrom
kl-gmt-1720-gamut-tooltip-zindex

LinKCoding commented Jul 31, 2026 •

edited

Loading

Uh oh!

nx-cloud Bot commented Jul 31, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jul 31, 2026 •

edited

Loading

Uh oh!

codecademydev commented Aug 7, 2026

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

aresnik11 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		// TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
		<BodyPortal zIndex={5} {...rest} />

		// TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
		<BodyPortal zIndex={4}>

		// TEMPORARY: zIndex override to stay above Overlay's default of 3 until GM-624 lands a shared z-index scale
		return <BodyPortal zIndex={5}>{content}</BodyPortal>;

Uh oh!

Conversation

LinKCoding commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecademydev commented Aug 7, 2026

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LinKCoding commented Jul 31, 2026 •

edited

Loading

nx-cloud Bot commented Jul 31, 2026 •

edited

Loading

codecov Bot commented Jul 31, 2026 •

edited

Loading