[codex] Fix glass hover compositing artifacts by juliusmarminge · Pull Request #4446 · pingdotgg/t3code

juliusmarminge · 2026-07-24T11:22:31Z

Summary

Hover actions in the thread sidebar could trigger stray blur artifacts, while branch and model picker surfaces allowed high-contrast content behind them to bloom through the glass. This made routine hover interactions look unstable and caused some dropdowns to pick up distracting color and text smears.

The root cause was a combination of many small backdrop-filter layers on ordinary sidebar rows, saturation applied to dropdown backdrops, and two nested backdrop filters in the model picker. These layers were recomposited as hover controls appeared, amplifying the underlying page content.

This change removes backdrop blur from flat thread rows while preserving glass on elevated surfaces. Dropdowns now use a neutral popover tint with a setting-aware opacity curve, retain the configured blur, and omit backdrop saturation. The model picker wrapper explicitly opts out of filtering so only its visible inner surface owns the glass effect.

At the default 80% glass setting, dropdowns render at approximately 83.6% effective opacity. At 40%, they render at approximately 50.8%, keeping the user setting visibly meaningful without restoring the original color bloom.

Validation

Ran targeted formatting checks for the changed files.
Ran targeted lint checks for the affected React components.
Ran the web package typecheck.
Ran React Doctor; it reported no new errors and one unrelated existing memoization advisory.
Verified sidebar hover actions in an isolated web environment and confirmed thread rows no longer create backdrop filters.
Verified branch and model pickers retain blur(12px), use the expected opacity curve, and avoid nested backdrop filters.
Ran git diff --check.

Note

Fix glass hover compositing artifacts in sidebar and model picker surfaces

Removes backdrop-filter from the model picker popover and backdrop-blur from card variant sidebar rows to eliminate compositing artifacts on hover.
Redefines .dropdown-glass in index.css to use a nested color-mix with var(--popover) and a blur-only backdrop filter (no saturate()), giving dropdown surfaces a denser, popover-tinted glass look.
Updates SidebarV2ThreadTooltip to render with dropdown-glass styling and hides the tooltip arrow.
Adjusts model picker component styles across ModelPickerContent, ModelPickerSidebar, and ModelListRow to align with the new glass surface approach.

^{Macroscope summarized c2035ba.}

Note

Low Risk
Visual/compositing-only changes to CSS and hover surfaces; no auth, data, or API behavior.

Overview
Fixes unstable blur and color bloom when hovering sidebar thread rows and when opening branch/model pickers over high-contrast page content.

Dropdown glass (.dropdown-glass) is split from dialog styling: elevated menus use a popover-tinted color-mix stack (18% popover + user --glass-opacity), blur only (no backdrop saturation), and the dark model picker surface follows the same tint. Thread tooltips mirror that background inline.

Sidebar thread rows drop backdrop-blur on card-variant rows so flat rows no longer stack backdrop-filter layers on hover.

Model picker disables backdrop-filter on the popover wrapper (single glass owner on the inner surface), moves rounded clipping to the content shell, and aligns hover/focus on picker rows and rail buttons with popover-based color-mix instead of bg-muted.

^{Reviewed by Cursor Bugbot for commit c2035ba. 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-24T11:22:39Z

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: 80ee65f0-3f86-4479-8180-dc65942ba4e6

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/fix-glass-hover-artifacts

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

macroscopeapp · 2026-07-24T11:31:53Z

Approvability

Verdict: Needs human review

CSS-only changes to fix glass hover compositing artifacts. However, an unresolved review comment identifies a potential regression where backdrop blur may be unreliable after disabling the outer backdrop-filter, warranting human verification.

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

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

Dismissing prior approval to re-evaluate e0dcd89

cursor · 2026-07-24T12:18:01Z

-        className="border-0 bg-transparent p-0 shadow-none before:hidden [--viewport-inline-padding:0]"
-        viewportClassName="rounded-lg !overflow-hidden p-0 [clip-path:inset(0_round_var(--radius-lg))]"
+        className="border-0 bg-transparent p-0 shadow-none before:hidden [-webkit-backdrop-filter:none]! [--viewport-inline-padding:0] [backdrop-filter:none]!"
+        viewportClassName="rounded-lg !overflow-hidden p-0"


Model picker blur under overflow

Medium Severity

Disabling backdrop filter on the outer PopoverPopup leaves glass only on ModelPickerContent, which sits inside the popover viewport’s overflow-clip / overflow-hidden plus rounded-lg wrapper. Elsewhere, dropdown-glass stays on the outer chrome above that viewport so page content can be sampled. Computed blur(12px) can still appear while the frosted page blur is lost or unreliable, which weakens the bloom fix this change targets.

Additional Locations (1)

apps/web/src/components/chat/ModelPickerContent.tsx#L522-L525

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

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

cursor

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{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 c2035ba. Configure here.}

cursor · 2026-07-24T12:25:52Z

                data-model-picker-provider={entry.instanceId}
                className={cn(
-                  "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-md transition-colors hover:bg-muted",
+                  "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-md transition-colors hover:bg-[color-mix(in_srgb,var(--popover)_90%,var(--foreground))] focus-visible:bg-[color-mix(in_srgb,var(--popover)_90%,var(--foreground))] focus-visible:outline-none",


Badge halo mismatches hover fill

Low Severity

Provider rail buttons now use a color-mix for hover/focus backgrounds. However, indicatorBackground, used by ProviderInstanceIcon for badge borders, still defaults to var(--muted). This creates a visual mismatch, causing badged instances to show a contrasting border or halo on hover and focus.

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

@juliusmarminge

## What's Changed * Increase light-mode contrast for user message bubbles by @juliusmarminge in pingdotgg/t3code#4441 * Restore model picker layout and retain iterative test state by @juliusmarminge in pingdotgg/t3code#4450 * Color settled PR labels on hover by @juliusmarminge in pingdotgg/t3code#4451 * [codex] Fix glass hover compositing artifacts by @juliusmarminge in pingdotgg/t3code#4446 **Full Changelog**: pingdotgg/t3code@v0.0.29-nightly.20260724.892...v0.0.29-nightly.20260724.893 Upstream release: https://github.com/pingdotgg/t3code/releases/tag/v0.0.29-nightly.20260724.893

Fix glass hover compositing artifacts

b8a5b5f

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:S 10-29 changed lines (additions + deletions). labels Jul 24, 2026

juliusmarminge marked this pull request as ready for review July 24, 2026 11:25

cursor Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread apps/web/src/components/SidebarV2.tsx

Ensure sidebar tooltip glass tint applies

79d6ce6

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

github-actions Bot added size:M 30-99 changed lines (additions + deletions). and removed size:S 10-29 changed lines (additions + deletions). labels Jul 24, 2026

macroscopeapp Bot previously approved these changes Jul 24, 2026

View reviewed changes

juliusmarminge and others added 2 commits July 24, 2026 14:11

Merge main and resolve model picker glass conflict

b45b5d7

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

Restore model picker backdrop sampling

e0dcd89

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

cursor Bot reviewed Jul 24, 2026

View reviewed changes

juliusmarminge and others added 2 commits July 24, 2026 14:19

Strengthen model picker row highlights

4206859

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

Strengthen model picker provider highlights

c2035ba

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

juliusmarminge enabled auto-merge (squash) July 24, 2026 12:23

juliusmarminge merged commit ece0508 into main Jul 24, 2026
16 checks passed

juliusmarminge deleted the t3code/fix-glass-hover-artifacts branch July 24, 2026 12:25

cursor Bot reviewed Jul 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[codex] Fix glass hover compositing artifacts#4446

[codex] Fix glass hover compositing artifacts#4446
juliusmarminge merged 6 commits into
mainfrom
t3code/fix-glass-hover-artifacts

juliusmarminge commented Jul 24, 2026 •

edited by macroscopeapp Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

macroscopeapp Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

cursor Bot Jul 24, 2026

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jul 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Summary

Validation

Fix glass hover compositing artifacts in sidebar and model picker surfaces

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

Uh oh!

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

Uh oh!

Approvability

Uh oh!

cursor Bot Jul 24, 2026

Choose a reason for hiding this comment

Model picker blur under overflow

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 24, 2026

Choose a reason for hiding this comment

Badge halo mismatches hover fill

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

juliusmarminge commented Jul 24, 2026 •

edited by macroscopeapp Bot

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

macroscopeapp Bot commented Jul 24, 2026 •

edited

Loading