fix: ensure toast notifications appear above modals

[Naetiksoni08]

Proposed changes

Toast notifications were appearing behind modals when triggered during team/channel creation. This was caused by #toastBarRoot (the toast portal container) having the same z-index as the modal, but appearing earlier in the DOM — causing the modal to visually stack above it.

before fix:

After Fix:
Added a CSS override in main.css to ensure #toastBarRoot always renders above the modal layer.

Issue(s)

Related to #38611

Steps to test or reproduce

1. Open the Create Channel or Create Team modal
2. Fill in the form and click Create
3. Observe that the error toast appears above the modal instead of behind it

Further comments

I also Investigated DOM reordering as an alternative approach, but both #modal-root and #toastBarRoot are created dynamically by their respective libraries on mount, making startup ordering unreliable. CSS z-index override on #toastBarRoot is the most reliable solution without modifying third-party library code.

Summary by CodeRabbit

• Style
  • Updated styling so toast notifications display above modal windows, improving visibility in the UI.
• Chores
  • Added a changeset entry recording this visual update for release tracking.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4b88184

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/http-router	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/abac	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch
@rocket.chat/server-fetch	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af303fd and 4b88184.

📒 Files selected for processing (1)

• .changeset/hot-doors-wait.md

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

• .changeset/hot-doors-wait.md

---

Walkthrough

Adds a new CSS rule #toastBarRoot with fixed positioning and z-index:10000 to render toast notifications above modals, and introduces a changeset file .changeset/hot-doors-wait.md documenting the patch.

Changes

Cohort / File(s)	Summary
Toast Container Styling apps/meteor/app/theme/client/main.css	Adds #toastBarRoot selector with position: fixed and z-index: 10000, plus a descriptive comment to ensure toasts appear above modal dialogs.
Changeset .changeset/hot-doors-wait.md	Adds a new changeset marking a patch for @rocket.chat/meteor with description: "ensure toast notifications appear above modals".

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 I hopped a tweak, with style to spare,
A toast that sits up in the air,
Above the modals, bold and bright,
It pops and shines like morning light. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix: ensure toast notifications appear above modals' directly aligns with the main change: adding a CSS z-index rule to #toastBarRoot to position toast notifications above modals.
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.}

---

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

[cubic-dev-ai]

No issues found across 1 file