From 975b478b37d8cd960de5af8d156fab5b8fe31619 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 25 Feb 2026 08:42:28 +0000 Subject: [PATCH 1/4] style: add global scrollbar styling with show-on-hover behavior Create a dedicated scrollbar.css that applies thin, transparent-by-default scrollbars across the app with a hover reveal effect. Remove the now-redundant scrollbar styles from the scroll-area component. https://claude.ai/code/session_016Q1ACxFMzDYBu3t7oKN8Ap --- .../lib/components/scroll-area/scroll-area.ts | 20 ---------------- libs/ui/src/lib/styles/index.css | 1 + libs/ui/src/lib/styles/scrollbar.css | 24 +++++++++++++++++++ 3 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 libs/ui/src/lib/styles/scrollbar.css diff --git a/libs/ui/src/lib/components/scroll-area/scroll-area.ts b/libs/ui/src/lib/components/scroll-area/scroll-area.ts index 8b3331519..c1a14b71a 100644 --- a/libs/ui/src/lib/components/scroll-area/scroll-area.ts +++ b/libs/ui/src/lib/components/scroll-area/scroll-area.ts @@ -16,26 +16,6 @@ import { cn } from '../../utils'; template: ` `, - styles: ` - [data-slot='scroll-area'] { - scrollbar-width: thin; - scrollbar-color: transparent transparent; - } - [data-slot='scroll-area']:hover { - scrollbar-color: var(--color-border) transparent; - } - [data-slot='scroll-area']::-webkit-scrollbar { - width: 8px; - height: 8px; - } - [data-slot='scroll-area']::-webkit-scrollbar-thumb { - background-color: transparent; - border-radius: 9999px; - } - [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb { - background-color: var(--color-border); - } - `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/libs/ui/src/lib/styles/index.css b/libs/ui/src/lib/styles/index.css index e16a9ebbc..1e1ef8153 100644 --- a/libs/ui/src/lib/styles/index.css +++ b/libs/ui/src/lib/styles/index.css @@ -1,3 +1,4 @@ @import url('@angular/cdk/overlay-prebuilt.css'); @import './shadcn.css'; +@import './scrollbar.css'; diff --git a/libs/ui/src/lib/styles/scrollbar.css b/libs/ui/src/lib/styles/scrollbar.css new file mode 100644 index 000000000..f1a68882e --- /dev/null +++ b/libs/ui/src/lib/styles/scrollbar.css @@ -0,0 +1,24 @@ +@layer base { + * { + scrollbar-width: thin; + scrollbar-color: transparent transparent; + } + + *:hover { + scrollbar-color: var(--color-border) transparent; + } + + *::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + *::-webkit-scrollbar-thumb { + background-color: transparent; + border-radius: 9999px; + } + + *:hover::-webkit-scrollbar-thumb { + background-color: var(--color-border); + } +} From 70d7ee978053d4864ef9164da11ecb032b6cbc5a Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 25 Feb 2026 09:03:35 +0000 Subject: [PATCH 2/4] fix: limit scrollbar hover behavior to scroll-area only Global scrollbars now show thin thumbs by default. The transparent-to-visible hover reveal is scoped to [data-slot='scroll-area'] elements only. https://claude.ai/code/session_016Q1ACxFMzDYBu3t7oKN8Ap --- libs/ui/src/lib/styles/scrollbar.css | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/libs/ui/src/lib/styles/scrollbar.css b/libs/ui/src/lib/styles/scrollbar.css index f1a68882e..b1c627de1 100644 --- a/libs/ui/src/lib/styles/scrollbar.css +++ b/libs/ui/src/lib/styles/scrollbar.css @@ -1,10 +1,6 @@ @layer base { * { scrollbar-width: thin; - scrollbar-color: transparent transparent; - } - - *:hover { scrollbar-color: var(--color-border) transparent; } @@ -14,11 +10,23 @@ } *::-webkit-scrollbar-thumb { - background-color: transparent; + background-color: var(--color-border); border-radius: 9999px; } - *:hover::-webkit-scrollbar-thumb { + [data-slot='scroll-area'] { + scrollbar-color: transparent transparent; + } + + [data-slot='scroll-area']:hover { + scrollbar-color: var(--color-border) transparent; + } + + [data-slot='scroll-area']::-webkit-scrollbar-thumb { + background-color: transparent; + } + + [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb { background-color: var(--color-border); } } From 6cd0ab4ef0b972e62201c862ee25cfa966c35a92 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 25 Feb 2026 09:07:09 +0000 Subject: [PATCH 3/4] feat: add show input to scroll-area (always | onhover) The scroll-area component now accepts a `show` input that controls scrollbar visibility. Defaults to 'onhover' (transparent until hover). Set to 'always' to keep the scrollbar visible at all times. https://claude.ai/code/session_016Q1ACxFMzDYBu3t7oKN8Ap --- libs/ui/src/lib/components/scroll-area/scroll-area.ts | 2 ++ libs/ui/src/lib/styles/scrollbar.css | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/libs/ui/src/lib/components/scroll-area/scroll-area.ts b/libs/ui/src/lib/components/scroll-area/scroll-area.ts index c1a14b71a..eaeb17d15 100644 --- a/libs/ui/src/lib/components/scroll-area/scroll-area.ts +++ b/libs/ui/src/lib/components/scroll-area/scroll-area.ts @@ -11,6 +11,7 @@ import { cn } from '../../utils'; selector: 'div[scScrollArea]', host: { 'data-slot': 'scroll-area', + '[attr.data-show]': 'show()', '[class]': 'class()', }, template: ` @@ -21,6 +22,7 @@ import { cn } from '../../utils'; }) export class ScScrollArea { readonly classInput = input('', { alias: 'class' }); + readonly show = input<'always' | 'onhover'>('onhover'); protected readonly class = computed(() => cn('overflow-auto', this.classInput()), diff --git a/libs/ui/src/lib/styles/scrollbar.css b/libs/ui/src/lib/styles/scrollbar.css index b1c627de1..dd3638a83 100644 --- a/libs/ui/src/lib/styles/scrollbar.css +++ b/libs/ui/src/lib/styles/scrollbar.css @@ -14,19 +14,19 @@ border-radius: 9999px; } - [data-slot='scroll-area'] { + [data-slot='scroll-area'][data-show='onhover'] { scrollbar-color: transparent transparent; } - [data-slot='scroll-area']:hover { + [data-slot='scroll-area'][data-show='onhover']:hover { scrollbar-color: var(--color-border) transparent; } - [data-slot='scroll-area']::-webkit-scrollbar-thumb { + [data-slot='scroll-area'][data-show='onhover']::-webkit-scrollbar-thumb { background-color: transparent; } - [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb { + [data-slot='scroll-area'][data-show='onhover']:hover::-webkit-scrollbar-thumb { background-color: var(--color-border); } } From 6b108c639e486e7be8f35d6de62b78eb7e9c0331 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 25 Feb 2026 09:08:33 +0000 Subject: [PATCH 4/4] refactor: remove show input from scroll-area MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The input is unnecessary — if you want always-visible scrollbars, just use a plain div with overflow-auto (the global default). Scroll area's purpose is the hover reveal behavior. https://claude.ai/code/session_016Q1ACxFMzDYBu3t7oKN8Ap --- libs/ui/src/lib/components/scroll-area/scroll-area.ts | 2 -- libs/ui/src/lib/styles/scrollbar.css | 8 ++++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/libs/ui/src/lib/components/scroll-area/scroll-area.ts b/libs/ui/src/lib/components/scroll-area/scroll-area.ts index eaeb17d15..c1a14b71a 100644 --- a/libs/ui/src/lib/components/scroll-area/scroll-area.ts +++ b/libs/ui/src/lib/components/scroll-area/scroll-area.ts @@ -11,7 +11,6 @@ import { cn } from '../../utils'; selector: 'div[scScrollArea]', host: { 'data-slot': 'scroll-area', - '[attr.data-show]': 'show()', '[class]': 'class()', }, template: ` @@ -22,7 +21,6 @@ import { cn } from '../../utils'; }) export class ScScrollArea { readonly classInput = input('', { alias: 'class' }); - readonly show = input<'always' | 'onhover'>('onhover'); protected readonly class = computed(() => cn('overflow-auto', this.classInput()), diff --git a/libs/ui/src/lib/styles/scrollbar.css b/libs/ui/src/lib/styles/scrollbar.css index dd3638a83..b1c627de1 100644 --- a/libs/ui/src/lib/styles/scrollbar.css +++ b/libs/ui/src/lib/styles/scrollbar.css @@ -14,19 +14,19 @@ border-radius: 9999px; } - [data-slot='scroll-area'][data-show='onhover'] { + [data-slot='scroll-area'] { scrollbar-color: transparent transparent; } - [data-slot='scroll-area'][data-show='onhover']:hover { + [data-slot='scroll-area']:hover { scrollbar-color: var(--color-border) transparent; } - [data-slot='scroll-area'][data-show='onhover']::-webkit-scrollbar-thumb { + [data-slot='scroll-area']::-webkit-scrollbar-thumb { background-color: transparent; } - [data-slot='scroll-area'][data-show='onhover']:hover::-webkit-scrollbar-thumb { + [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb { background-color: var(--color-border); } }