fix: lower toast z-index so dropdowns render above toasts

[maxktz]

Closes #2287

What Changed

Lowered the toast viewport z-index from z-100 to z-40 in apps/web/src/components/ui/toast.tsx.

Why

Menus and popovers use z-50, so when a toast is visible and a user opens a dropdown (e.g. "Open" or "Commit & push" in the toolbar), the dropdown renders behind the toast. Interactive overlays should take priority over passive notifications.

UI Changes

result.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk CSS-only stacking change; main risk is :has() selector support/behavior differences potentially affecting toast layering in some browsers.

Overview
Adjusts toast stacking so interactive overlays (menus/selects/popovers/comboboxes/autocomplete) render above notifications.

Adds a body:has(...) CSS rule in index.css that lowers [data-slot="toast-viewport"] to z-index: 40 when an overlay is open, while keeping existing layering when a dialog/sheet/alert backdrop is present.

^{Reviewed by Cursor Bugbot for commit 14dc47c. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Lower toast z-index when dropdowns are open so they render above toasts

Adds a CSS rule in index.css that sets [data-slot="toast-viewport"] to z-index: 40 when any menu, select, popover, combobox, or autocomplete positioner is open and no dialog backdrop is present. This prevents toasts from overlapping dropdowns outside of dialog contexts.

^{Macroscope summarized 14dc47c.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1d9c54ce-1adc-4bd8-a6c0-3009459637db

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[macroscopeapp]

Approvability

A prior Macroscope approval was dismissed. Re-evaluating 14dc47c…

[juliusmarminge]

40 will put them under dialogoverlays so if e.g. command palette is open and triggers a toast that toast won't be shown/interactible cause it will be covered by the overlay

[maxktz]

40 will put them under dialogoverlays so if e.g. command palette is open and triggers a toast that toast won't be shown/interactible cause it will be covered by the overlay

Agreed, then a smart css selector with exception could do the trick, I made changes

Cap.2026-04-22.at.23.58.16.mp4

Dismissing prior approval to re-evaluate 958b495

Dismissing prior approval to re-evaluate 14dc47c