Skip to content

[codex] Fix glass hover compositing artifacts #4446

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

Merged
juliusmarminge merged 6 commits into from
Jul 24, 2026
Merged

[codex] Fix glass hover compositing artifacts #4446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b8a5b5f
Fix glass hover compositing artifacts
juliusmarminge Jul 24, 2026
79d6ce6
Ensure sidebar tooltip glass tint applies
juliusmarminge Jul 24, 2026
b45b5d7
Merge main and resolve model picker glass conflict
juliusmarminge Jul 24, 2026
e0dcd89
Restore model picker backdrop sampling
juliusmarminge Jul 24, 2026
4206859
Strengthen model picker row highlights
juliusmarminge Jul 24, 2026
c2035ba
Strengthen model picker provider highlights
juliusmarminge Jul 24, 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
8 changes: 5 additions & 3 deletions apps/web/src/components/SidebarV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
AlarmClockOffIcon,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
CircleAlertIcon,
CircleCheckIcon,
CircleDashedIcon,
Expand Down Expand Up @@ -240,7 +239,11 @@ function SidebarV2ThreadTooltip({
side="right"
align="start"
sideOffset={8}
className="dropdown-glass max-w-80 border-0! bg-[color-mix(in_srgb,var(--background)_var(--glass-opacity),transparent)] text-left whitespace-normal shadow-lg/10 before:hidden dark:shadow-none"
className="dropdown-glass max-w-80 border-0! text-left whitespace-normal shadow-lg/10 before:hidden dark:shadow-none"
Comment thread
juliusmarminge marked this conversation as resolved.
style={{
background:
"color-mix(in srgb, var(--popover) 18%, color-mix(in srgb, var(--popover) var(--glass-opacity), transparent))",
}}
>
<div className="flex max-w-80 flex-col gap-2 p-2">
<div className="whitespace-nowrap text-sm font-medium text-foreground">{thread.title}</div>
Expand Down Expand Up @@ -652,7 +655,6 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
// content; surface is reserved for interaction (hover, multi-select, route).
const rowSurfaceClassName = cn(
"group/v2-row relative w-full cursor-pointer overflow-hidden rounded-md text-left outline-none select-none",
variant === "card" && "backdrop-blur-[16px]",
props.isActive
? "bg-sidebar-row-active text-sidebar-foreground"
: isSelected
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ModelListRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
contentClassName="flex w-full items-center gap-3"
className={cn(
"group relative w-full !min-w-0 max-w-full cursor-pointer rounded-md px-2 py-2.5 transition-[background-color,box-shadow,color]",
"data-highlighted:bg-muted/56 data-selected:bg-foreground/[0.08] data-selected:text-foreground data-selected:ring-0",
"hover:bg-[color-mix(in_srgb,var(--popover)_90%,var(--foreground))] data-highlighted:bg-[color-mix(in_srgb,var(--popover)_90%,var(--foreground))] data-selected:bg-foreground/[0.08] data-selected:text-foreground data-selected:ring-0 [&[data-highlighted][data-selected]]:bg-[color-mix(in_srgb,var(--popover)_90%,var(--foreground))]",
props.disabledReason &&
"data-disabled:pointer-events-auto data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent",
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ModelPickerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
return (
<TooltipProvider delay={0}>
<div
className="dropdown-glass model-picker-surface relative flex h-screen max-h-96 w-screen max-w-100 flex-row overflow-hidden rounded-lg text-popover-foreground"
className="dropdown-glass model-picker-surface relative flex h-screen max-h-96 w-screen max-w-100 flex-row overflow-hidden rounded-lg text-popover-foreground [clip-path:inset(0_round_var(--radius-lg))]"
data-model-picker-content="true"
>
{/* Sidebar */}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/chat/ModelPickerSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
render={
<button
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",
)}
onClick={() => handleSelect("favorites")}
type="button"
Expand Down Expand Up @@ -172,7 +172,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
<button
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",

@cursor cursor Bot Jul 24, 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.

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.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit c2035ba. Configure here.

isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent",
)}
data-provider-accent-color={entry.accentColor}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/chat/ProviderModelPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,8 +187,8 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
</PopoverTrigger>
<PopoverPopup
align="start"
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"

@cursor cursor Bot Jul 24, 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.

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)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit e0dcd89. Configure here.

>
<ModelPickerContent
activeInstanceId={activeInstanceId}
Expand Down
20 changes: 18 additions & 2 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,7 +574,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
--alert-glass-tint: var(--warning);
}

.dropdown-glass,
.dialog-glass {
background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
Expand All @@ -588,6 +587,19 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
}

.dropdown-glass {
/*
* Elevated glass needs a denser tint than broad ambient surfaces. Nesting
* the user-controlled mix inside an 18% popover tint preserves the full
* opacity setting range (40% -> 51%, 80% -> 84%, 100% -> 100%) while
* keeping high-contrast page content from blooming through menus.
*/
background: color-mix(
in srgb,
var(--popover) 18%,
color-mix(in srgb, var(--popover) var(--glass-opacity), transparent)
);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%);
}
Expand All @@ -602,7 +614,11 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
}

.dark .model-picker-surface.model-picker-surface {
background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
background: color-mix(
in srgb,
var(--popover) 18%,
color-mix(in srgb, var(--popover) var(--glass-opacity), transparent)
);
}

.dark .dialog-glass {
Expand Down
Loading