Unify dialog glass and fix composer overlays by juliusmarminge · Pull Request #4365 · pingdotgg/t3code

juliusmarminge · 2026-07-23T12:00:30Z

Summary

Restores a consistent glass-surface system for dialogs and composer suggestion menus, and fixes the draft-page stacking bug that allowed page content to render above file and skill results.

Problem

Dialog, alert-dialog, and command-palette primitives had drifted into separate backdrop and popup treatments.
Dark-mode dialog borders were visually heavier than the equivalent light-mode elevation.
Composer file and skill menus relied on local absolute positioning. On draft pages, the hero and composer stacking contexts could place the large page heading above the menu.
The draft and existing-chat composer paths therefore behaved differently even though they shared most of the same UI.

Changes

Centralized the shared dialog backdrop, popup, and mobile-sheet classes.
Applied the shared surface treatment to dialogs, alert dialogs, and command dialogs.
Kept the light-mode border treatment while softening the dark-mode dialog edge.
Portaled composer file and skill menus to the document body.
Anchored the portaled menus to the live composer bounds and update their position on resize, scroll, and composer resizing.
Removed the draft-only isolation contexts that interfered with overlay stacking.

Verification

vp fmt on all changed files
focused vp lint for the affected web components
vp run typecheck in apps/web
vp test run src/components/settings/AddProviderInstanceWizardSteps.test.tsx
React Doctor on the changed web scope
live T3 preview verification in light and dark mode
- draft composer: file and skill menus
- existing chat composer: file and skill menus
- confirmed real backdrop blur and translucent tint
- confirmed the menu wins pointer hit-testing above page content

Note

Unify dialog glass styles and fix composer command menu overlay stacking

Adds dialog-styles.ts exporting shared DIALOG_BACKDROP_CLASS, DIALOG_POPUP_CLASS, and DIALOG_MOBILE_SHEET_CLASS constants, replacing duplicated inline class strings in dialog.tsx, alert-dialog.tsx, and command.tsx.
Fixes composer command menu overlay by rendering it into a portal (document.body) via a new ComposerCommandMenuLayer component in ChatComposer.tsx, using fixed positioning and z-index 70, with position tracking on resize and scroll.
Removes isolation: isolate from .chat-composer-glass-host and isolate Tailwind class from composer containers in ChatView.tsx to fix stacking context conflicts.
Adjusts dark mode dialog glass border opacity from 14% to 8% in index.css.
Behavioral Change: DialogPopup no longer accepts a backdropClassName prop.

^{Macroscope summarized a9aeb0e.}

Note

Low Risk
UI layering and shared CSS only; portal positioning could regress on unusual scroll containers but scope is limited to composer menus and dialog primitives.

Overview
Unifies dialog, alert-dialog, and command backdrop/popup styling via shared dialog-styles.ts constants, softens dark-mode dialog borders (14% → 8% white), and drops DialogPopup’s backdropClassName prop.

Composer file/skill menus now render through a new ComposerCommandMenuLayer that portals to document.body with fixed positioning (z-[70]) and tracks the composer anchor on resize/scroll. isolate is removed from draft composer wrappers and .chat-composer-glass-host (pseudo-element gets pointer-events: none and z-index: 0) so menus and page content stack correctly on draft hero pages.

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

Co-authored-by: codex <codex@users.noreply.github.com>

coderabbitai · 2026-07-23T12:00:37Z

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: 25f510dd-3d6a-45c7-94b6-d2ad181c2e5f

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
Commit unit tests in branch t3code/restore-lightmode-colors

_{Comment @coderabbitai help to get the list of available commands.}

cursor

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

^{Bugbot Autofix is ON, but it could not run because the branch was deleted or merged before autofix could start.}

^{Reviewed by Cursor Bugbot for commit a9aeb0e. Configure here.}

cursor · 2026-07-23T12:18:00Z

                  onSelect={onSelectComposerItem}
                />
-              </div>
+              </ComposerCommandMenuLayer>


Portaled menu survives mobile collapse

Medium Severity

The portaled command menu mispositions when its anchor element becomes hidden on mobile composer collapse. This occurs because composerMenuOpen can remain true, and getBoundingClientRect returns zero for the hidden anchor, causing the menu to render incorrectly.

^{Reviewed by Cursor Bugbot for commit a9aeb0e. Configure here.}

cursor · 2026-07-23T12:18:00Z

+  return createPortal(
+    <div
+      className="pointer-events-auto fixed z-[70]"
+      style={{


Composer menu above modal layers

Medium Severity

The portaled composer command menu's z-index of 70 places it above shared dialogs and command palette surfaces (z-50). This can cause the menu to render on top of these elements and intercept pointer events.

^{Reviewed by Cursor Bugbot for commit a9aeb0e. Configure here.}

…sign (#8) * feat(web): refresh application surfaces * style(web): polish dark mode dialogs * fix(web): unify and tune glass surfaces Co-authored-by: codex <codex@users.noreply.github.com> * fix(web): apply glass opacity to thread tooltip * fix(web): override thread tooltip background * fix(web): apply glass opacity to model picker * style(web): polish glass opacity slider * fix(web): apply glass opacity to command palette * fix(web): add glass composer alerts * fix(web): honor composer glass opacity * test(web): stabilize timeline module setup * style(web): fade settings content beneath navbar * test(desktop): include glass opacity in settings fixture * fix(web): address redesign review findings * fix(web): sync provider banner dismissal * fix(web): new-thread defaults ignored for remote environments (pingdotgg#4276) Co-authored-by: Claude Fable 5 <noreply@anthropic.com> * feat: add "Auto" runtime mode — AI-reviewed approvals for Codex and Claude (pingdotgg#4272) Co-authored-by: Claude Fable 5 <noreply@anthropic.com> * Add shared t3.json project configuration support (pingdotgg#4317) * Restore light-mode surfaces and refine dialog styling - Restore light-mode glass, dialog, dropdown, and composer colors - Refine provider wizard, changed-file cards, sidebar controls, and buttons - Update wizard step tests for the new list structure * Unify dialog glass and fix composer overlays (pingdotgg#4365) Co-authored-by: codex <codex@users.noreply.github.com> --------- Co-authored-by: maria-rcks <maria@kuuro.net> Co-authored-by: Julius Marminge <julius0216@outlook.com> Co-authored-by: codex <codex@users.noreply.github.com> Co-authored-by: Theo Browne <me@t3.gg> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

…ingdotgg#4350) (#185) * feat: add "Auto" runtime mode — AI-reviewed approvals for Codex and Claude (pingdotgg#4272) Co-authored-by: Claude Fable 5 <noreply@anthropic.com> (cherry picked from commit fbd7742) * Add shared t3.json project configuration support (pingdotgg#4317) (cherry picked from commit 1c9a6de) * Restore light-mode surfaces and refine dialog styling - Restore light-mode glass, dialog, dropdown, and composer colors - Refine provider wizard, changed-file cards, sidebar controls, and buttons - Update wizard step tests for the new list structure (cherry picked from commit e51538b) * Unify dialog glass and fix composer overlays (pingdotgg#4365) Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436) * fix(web): warn before silent Windows updates (pingdotgg#4350) (cherry picked from commit b41e89e) * chore(sync): retrigger CI for #185 after retarget to main Co-authored-by: aaditagrawal <aaditagrawal@users.noreply.github.com> * fix(sync): preserve Droid medium-access with Auto runtime mode Keep fork-only medium-access in RuntimeMode alongside upstream Auto so presentation maps and Droid autonomy mapping typecheck and behave. Co-authored-by: aaditagrawal <aaditagrawal@users.noreply.github.com> --------- Co-authored-by: Theo Browne <me@t3.gg> Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Julius Marminge <julius0216@outlook.com> Co-authored-by: codex <codex@users.noreply.github.com> Co-authored-by: Yukun Shan <92423096+nateEc@users.noreply.github.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: aaditagrawal <aaditagrawal@users.noreply.github.com>

Unify dialog glass and fix composer overlays

a9aeb0e

Co-authored-by: codex <codex@users.noreply.github.com>

github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Jul 23, 2026

juliusmarminge marked this pull request as ready for review July 23, 2026 12:15

juliusmarminge merged commit 4d83436 into main Jul 23, 2026
16 of 17 checks passed

juliusmarminge deleted the t3code/restore-lightmode-colors branch July 23, 2026 12:15

cursor Bot reviewed Jul 23, 2026

View reviewed changes

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

ee323e6

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

e29ea63

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

176cb69

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

cb9a6c8

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

a5c200c

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

5638f8f

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

8af0333

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

f84d4f8

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

9015464

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

c461f74

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

d6d8254

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

225ce87

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

0e52618

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

1837121

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

871957a

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Jul 25, 2026

Unify dialog glass and fix composer overlays (pingdotgg#4365)

82ed449

Co-authored-by: codex <codex@users.noreply.github.com> (cherry picked from commit 4d83436)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Unify dialog glass and fix composer overlays#4365

Unify dialog glass and fix composer overlays#4365
juliusmarminge merged 1 commit into
mainfrom
t3code/restore-lightmode-colors

juliusmarminge commented Jul 23, 2026 •

edited by cursor Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 23, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jul 23, 2026

Uh oh!

cursor Bot Jul 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

juliusmarminge commented Jul 23, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Changes

Verification

Unify dialog glass styles and fix composer command menu overlay stacking

Uh oh!

coderabbitai Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 23, 2026

Choose a reason for hiding this comment

Portaled menu survives mobile collapse

Uh oh!

cursor Bot Jul 23, 2026

Choose a reason for hiding this comment

Composer menu above modal layers

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

juliusmarminge commented Jul 23, 2026 •

edited by cursor Bot

Loading

coderabbitai Bot commented Jul 23, 2026 •

edited

Loading