Skip to content

fix: ensure Dialog modals render above popovers and edit overlays #5091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
xxiaoxiong wants to merge 2 commits into from
Closed

fix: ensure Dialog modals render above popovers and edit overlays #5091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
482429f
fix: ensure Dialog modals render above popovers and edit overlays
xxiaoxiong Jul 3, 2026
4e41316
fix: raise Settings modal-backdrop z-index to 2000 to match Dialog tier
xxiaoxiong Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/styles/viewer/memory.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1479,11 +1479,11 @@
position: fixed;
right: 16px;
bottom: 16px;
/* Above modal backdrops (z-index 100) so the banner remains visible and
/* Above modal backdrops (z-index 2000) so the banner remains visible and
actionable even while Settings or any other modal is open. The banner
uses pointer-events:none on the card itself with opt-in on interactive
children, so it never intercepts clicks meant for the layer below. */
z-index: 110;
z-index: 2010;
width: 380px;
max-width: calc(100vw - 32px);
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/styles/workspace/mention-home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
z-index: 2000;
animation: fade-in 160ms ease-out;
}
.modal {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
z-index: 2000;

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Raise the Settings backdrop as well

This only raises the CSS-module backdrop used by @open-design/components/Dialog; the Settings dialog still renders a plain <div className="modal-backdrop"> in apps/web/src/components/SettingsDialog.tsx, and that global class remains at z-index: 100 in apps/web/src/styles/workspace/mention-home.css. In the Settings path called out by this fix, any existing overlay/popover in the 1500–1900 tier can still paint above Settings, so the reported modal-ordering bug remains unless the global Settings backdrop is raised too or Settings is migrated onto the shared Dialog.

Useful? React with 👍 / 👎.

@nettee nettee Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Raising the shared Dialog backdrop helps the component-backed modals, but it does not fix the Settings flow named in the PR description. SettingsDialog still renders a plain <div className="modal-backdrop"> at apps/web/src/components/SettingsDialog.tsx:3796, and the global .modal-backdrop rule is still z-index: 100 in apps/web/src/styles/workspace/mention-home.css:281. That means the 1500-1900 popover tiers can still paint above Settings, so the user-visible bug remains on the current head. Please either migrate SettingsDialog onto the shared Dialog component or raise the Settings/global backdrop tier in the same patch so the stated fix actually covers the affected modal.

🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.

animation: dialog-backdrop-fade-in 160ms ease-out;
}

Expand Down
Loading