mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
fix(site): standardize scrollbar styling with global baseline (#24019)
## Summary Standardizes all frontend scrollbars to use `scrollbar-width: thin` and `scrollbar-color: hsl(var(--surface-quaternary)) transparent`. ### Changes **Global baseline** (`site/src/index.css`): - Both properties are inherited, so this cascades to all scroll containers - Components that hide scrollbars (e.g. `SidebarTabView`) override locally with `scrollbar-width: none` **Removed redundant per-component scrollbar utilities**: - `AgentDetailView.tsx` — removed `[scrollbar-width:thin]` and `[scrollbar-color:...]` (preserved `[scrollbar-gutter:stable]`) - `ConfigureAgentsDialog.tsx` — removed redundant scrollbar utilities from two locations - `DeploymentBannerView.tsx` — removed `[scrollbar-width:thin]` - `ChatMessageInput.tsx` — removed redundant scrollbar utilities **Aligned specialized scrollbar surfaces**: - `TerminalPage.tsx` — updated webkit scrollbar thumb from hardcoded `rgba(255, 255, 255, 0.18)` → `hsl(var(--surface-quaternary))`, track from `inherit` → `transparent`, width from `10px` → `8px` - `Chart.tsx` — removed local JS-style scrollbar overrides (now covered by global baseline) ### Preserved as-is - `SidebarTabView.tsx` — intentional hidden scrollbar (`scrollbar-width: none` overrides global) - `ScrollArea.tsx` — already uses `bg-surface-quaternary` ✓ - `MonacoEditor.tsx` — Monaco manages its own scrollbars internally - All `[scrollbar-gutter:stable]` usages preserved
This commit is contained in:
@@ -104,7 +104,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
|
||||
<div
|
||||
className="sticky bottom-0 z-[1] flex h-9 w-full items-center gap-8
|
||||
overflow-x-auto overflow-y-hidden whitespace-nowrap border-0 border-t border-solid border-border
|
||||
bg-surface-primary pr-4 font-mono text-xs leading-none [scrollbar-width:thin]"
|
||||
bg-surface-primary pr-4 font-mono text-xs leading-none"
|
||||
>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<Tooltip>
|
||||
|
||||
@@ -486,16 +486,16 @@ export const WorkspaceTerminal = ({
|
||||
}
|
||||
|
||||
${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar-track {
|
||||
background-color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
${terminalScopeSelector} .xterm-viewport::-webkit-scrollbar-thumb {
|
||||
min-height: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
background-color: hsl(var(--surface-quaternary));
|
||||
}
|
||||
`}</style>
|
||||
<div
|
||||
|
||||
@@ -61,7 +61,6 @@ export const ChartContent: FC<HTMLProps<HTMLDivElement>> = (props) => {
|
||||
ref={contentRef}
|
||||
className={cn(
|
||||
"relative flex flex-1 items-stretch overflow-auto text-xs font-medium",
|
||||
"[scrollbar-color:hsl(var(--border-default))_hsl(var(--surface-primary))]",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user