Merge pull request #73216 from NousResearch/bb/desktop-thin-scrollbars

fix(desktop): thin chrome scrollbars without platform chunk
This commit is contained in:
brooklyn! 2026-07-28 03:08:06 -05:00 committed by GitHub
commit fd39696ccf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 17 deletions

View file

@ -9,7 +9,7 @@ export function LogView({ className, ...props }: ComponentProps<'div'>) {
return (
<div
className={cn(
'overflow-auto rounded-lg border border-(--ui-stroke-tertiary) px-2.5 py-1.5 font-mono text-[0.6875rem] leading-[1.5] whitespace-pre-wrap break-words text-(--ui-text-tertiary) [scrollbar-width:thin]',
'overflow-auto rounded-lg border border-(--ui-stroke-tertiary) px-2.5 py-1.5 font-mono text-[0.6875rem] leading-[1.5] whitespace-pre-wrap break-words text-(--ui-text-tertiary)',
className
)}
data-selectable-text="true"

View file

@ -960,16 +960,17 @@ text-* variant utilities. */ .btn-arc {
}
@layer components {
.scrollbar-dt,
.scrollbar-dt * {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
}
/* Chromium 121+ (Electron) prefers standard scrollbar-* over
::-webkit-scrollbar and ignores the latter when both are set platform
thin on mac still looks chunky. Use webkit for real thin thumbs; gate the
standard props so only non-webkit engines (Firefox) take that path.
https://developer.chrome.com/docs/css-ui/scrollbar-styling
https://syntackle.com/blog/changes-to-scrollbar-styling-in-chrome-121/ */
.scrollbar-dt::-webkit-scrollbar,
.scrollbar-dt *::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
width: 0.25rem;
height: 0.25rem;
}
.scrollbar-dt::-webkit-scrollbar-track,
@ -983,7 +984,6 @@ text-* variant utilities. */ .btn-arc {
.scrollbar-dt *::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
border-radius: 9999rem;
border: 0.125rem solid transparent;
background-clip: padding-box;
}
@ -1002,14 +1002,9 @@ text-* variant utilities. */ .btn-arc {
render under document.body, outside the `.scrollbar-dt` scope on
#root. Same visual treatment, applied directly to the overlay
container so its (and only its) internal scrollbar is themed. */
.dt-portal-scrollbar {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dt-midground) 28%, transparent) transparent;
}
.dt-portal-scrollbar::-webkit-scrollbar {
width: 0.375rem;
height: 0.375rem;
width: 0.25rem;
height: 0.25rem;
}
.dt-portal-scrollbar::-webkit-scrollbar-track,
@ -1020,7 +1015,6 @@ text-* variant utilities. */ .btn-arc {
.dt-portal-scrollbar::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--dt-midground) 28%, transparent);
border-radius: 9999rem;
border: 0.0625rem solid transparent;
background-clip: padding-box;
}
@ -1032,6 +1026,19 @@ text-* variant utilities. */ .btn-arc {
.dt-portal-scrollbar::-webkit-scrollbar-button {
display: none;
}
@supports not selector(::-webkit-scrollbar) {
.scrollbar-dt,
.scrollbar-dt * {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
}
.dt-portal-scrollbar {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--dt-midground) 28%, transparent) transparent;
}
}
}
/* Bottom clearance lives on [data-slot='aui_composer-clearance']