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 2 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 @@ -236,7 +235,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 @@ -647,7 +650,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/ProviderModelPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ 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]"
className="border-0 bg-transparent p-0 shadow-none before:hidden [-webkit-backdrop-filter:none]! [--viewport-inline-padding:0] [backdrop-filter:none]!"
viewportClassName="!overflow-hidden p-0"
>
<ModelPickerContent
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