fix(web): render dropdowns above toasts

[Brechard]

Problem

A toast that arrives while a dropdown is open paints straight over it.

The toast viewport sits at z-index: 100 (apps/web/src/components/ui/toast.tsx:562), while the popup positioners sit well below it:

layer	before
dialog / sheet / command palette	50
select / combobox / autocomplete	50
menu / popover	60
toast viewport	100

So every toast outranks every dropdown. The z-[calc(9999-var(--toast-index))] on the individual toasts only orders them against each other inside the viewport's stacking context — the viewport's z-100 is what beats the menu.

It isn't only cosmetic: the toast viewport also takes pointer events, so a click aimed at a covered menu item lands on the toast (or its dismiss button) and fires the wrong thing.

Fix

Move the five popup positioners to z-index: 130.

Toasts keep their place above every ordinary surface, dialogs and sheets included — a toast usually reports the result of something you did inside one. The single exception is now the dropdown the user is actively holding open: that is the focused interaction, while a toast is ambient and dismisses itself a few seconds later. The transient thing should yield to the interactive one.

130 also clears the theme inspector cluster (index.css:1203 spotlight 100, :1230 hover 101, ThemeEditorPanel.tsx:1036 panel 110, index.css:1213 its popovers 120), so dropdowns opened from the theme editor keep working.

Resulting order: dialog/sheet 50 → toast 100 → theme editor 110/120 → dropdowns 130.

Before / After

before	after

The toast covers the editor list and swallows clicks meant for it; afterwards the menu sits on top and the toast tucks in behind.

Notes

• select.tsx:146 and :166 keep their z-50. Those are the scroll-up/down arrows inside the popup, scoped to the popup's own stacking context.
• Verified in the running dev app: [data-slot="menu-positioner"] computes to z-index: 130, and hit-testing a point inside the overlap now returns the menu item rather than the toast.

---

Note

Low Risk
CSS-only z-index tweaks on overlay positioners; no logic, auth, or data changes, with a small chance of unexpected overlap with other high z-index UI.

Overview
Raises popup stacking so open dropdowns stay above the toast layer (z-100) and remain clickable when a toast appears.

The positioner className on autocomplete, combobox, menu, popover, and select changes from z-50 / z-[60] to z-[130], putting active menus above toasts while still below nothing critical beyond the theme-editor cluster described in the PR. Scroll arrows inside select popups keep their local z-50.

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

Note

Render dropdowns above toasts by raising z-index to 130

Increases the z-index of positioner elements in autocomplete, combobox, menu, popover, and select components from z-50/z-[60] to z-[130], ensuring dropdowns render above toast notifications.

^{Macroscope summarized 7649f65.}

[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 Plus

Run ID: 34a00c6b-1424-4840-bba4-aedef9f5f1db

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

---

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

[macroscopeapp]

Approvability

Verdict: Approved 7649f65

A simple CSS z-index fix ensuring dropdown components render above toast notifications (z-100 → z-[130]). The change is purely visual with no logic impact.

^{You can customize Macroscope's approvability policy. Learn more.}