aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

style(scrollbar): match shadcn ScrollArea aesthetic on native scrollbars

Browse source 
The page-level scroll on every standalone falls back to the browser's default
scrollbar because nothing wraps the app shell in <ScrollArea>. Add global
@layer base styles so native scrollbars (page scroll, textareas, etc.) pick
up the same border-color thumb + transparent track + rounded-full styling
as the shadcn ScrollArea component.
This commit is contained in:
Padreug 2026-05-06 07:22:40 +02:00
commit b46d23b5bb
1 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/assets/index.css
View file

@ -177,4 +177,31 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
/* Match shadcn ScrollArea look on native scrollbars (full-page scroll,
textareas, anything not wrapped in <ScrollArea>). */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 9999px;
border: 2px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-muted-foreground);
background-clip: content-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
} }