feat(notifications): increase z-index

[jmcbgaston]

Summary

• Increase notifications-wrapper-z-index from 200 to 400 so notifications render above Blueprint modal (z-index 370).
• Update SCSS, variables.json, variables.ts, and variables.js for consistency.
• Re-enable pointer events on the notification container so toasts stay clickable/hoverable when a Radix (Blueprint) modal has disabled pointer events on the rest of the page.

Summary by CodeRabbit

• Bug Fixes

  • Notifications now reliably appear above other UI elements (including modal overlays) to avoid being obscured.
  • Notification hit-testing improved so underlying elements no longer intercept clicks meant for notifications.

• Style

  • Minor visual/animation tweaks to notification appearance and transitions for smoother rendering.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ jmcbgaston
❌ Jose Gaston

---

Jose Gaston seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3fdf3a96-665e-4a68-820f-c16729c0afbd

📥 Commits

Reviewing files that changed from the base of the PR and between 642e177 and 3667ba2.

📒 Files selected for processing (5)

• src/components/notification/Notification.scss
• src/styles/constants/_layout.scss
• src/styles/variables.js
• src/styles/variables.json
• src/styles/variables.ts

✅ Files skipped from review due to trivial changes (1)

• src/styles/variables.json

---

Walkthrough

The notifications wrapper z-index was increased from 200 to 400 across SCSS, JSON, JS, and TS style files; Notification component SCSS also added pointer-events adjustments and minor formatting tweaks.

Changes

Cohort / File(s)	Summary
Layout Constants src/styles/constants/_layout.scss	Bumped $notifications-wrapper-z-index from 200 !default to 400 !default; inline comment references Blueprint modal (370).
Serialized & Runtime Variables src/styles/variables.json, src/styles/variables.js, src/styles/variables.ts	Updated notificationsWrapperZIndex/notifications-wrapper-z-index values from 200 to 400 in JSON, JS, and TS exports.
Notification Styles src/components/notification/Notification.scss	Added pointer-events: none to .notifications-wrapper and pointer-events: auto to .notification-container; adjusted box-shadow alpha and transition format for consistency.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• dealwith
• shahzadaziz
• jfox-box

Poem

🐰 I hopped up high to tweak the stack,
Above the modal now, there's no looking back,
Four hundred tall to brighten the view,
Clicks reach the notice, as pointers pass through,
A tiny rabbit's fix—quick and true.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(notifications): increase z-index' clearly and concisely describes the main change—increasing the z-index of notifications for proper layering.
Description check	✅ Passed	The PR description effectively explains the changes: z-index increase from 200 to 400, reason (to render above Blueprint modal at 370), affected files, and the pointer events fix.
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 unit tests (beta)

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

---

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.}

[tjuanitas]

FYI we're cautious of changes to the src/styles directory because of how it'll impact existing applications and the interaction with blueprint. it's best to keep the blueprint team informed of the changes cc:@jaknas