From 043e71d725beb978b815dd16c8a2a5b218642225 Mon Sep 17 00:00:00 2001 From: Bohdan Triapitsyn Date: Wed, 26 Aug 2026 00:09:34 +0300 Subject: [PATCH] fix(ui): give the scroll shadow size variable a real default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The base rule declared --scroll-shadow-size as var(--scroll-shadow-size, 48px) — a self-referential cycle, which computes to invalid and silently resolves every mask below to none. The old ScrollShadow component masked the bug by setting the variable inline; the hook-based path (the chat scroller) sets only the data attributes, so the chat lost its top and bottom scroll fades. A concrete 48px default restores them; inline overrides from the component still win. --- packages/ui/src/index.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index d4ad5d66..0ce3e073 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -258,7 +258,12 @@ div[data-chat-input-footer="true"] { /* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */ [data-scroll-shadow="true"] { - --scroll-shadow-size: var(--scroll-shadow-size, 48px); + /* A concrete default, not var(--scroll-shadow-size, 48px): a custom + property referencing itself is a cycle and computes to invalid, which + silently killed every mask below for consumers that don't set the + variable inline (the hook-based chat scroller). Inline styles from the + ScrollShadow component still override this. */ + --scroll-shadow-size: 48px; } [data-scroll-shadow="true"][data-orientation="vertical"] {