From faa94129c58e7a3b8dbf83ccb0a8df032c82e9f3 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Sat, 13 Dec 2025 14:02:30 +0100 Subject: [PATCH] style(calendar): add fade effect to DateStrip edges MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add CSS mask-image gradient to fade out dates at the left and right edges of the DateStrip, creating a smoother visual scroll indicator. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../apps/web/src/lib/components/calendar/DateStrip.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte index 7b0a3b73a..eff4b2f47 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte @@ -412,6 +412,14 @@ scroll-behavior: auto; padding: 1.25rem 1rem 0.25rem; margin-top: -1rem; + mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); + -webkit-mask-image: linear-gradient( + to right, + transparent 0%, + black 8%, + black 92%, + transparent 100% + ); } .days-scroll::-webkit-scrollbar {