From 2200255a3aaaaa3c98c95f2003036d0fd5a60cf7 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Mon, 27 Apr 2026 08:16:38 -0700 Subject: [PATCH] Add scroll fade indicators to Modal content area. Use the four-layer scroll-shadow background trick (two local-attached white covers at top and bottom that scroll with the content, plus two fixed dark gradients) so a soft fade is visible above and below the scrollable region only when there is content out of view in that direction. Co-Authored-By: Claude Opus 4.7 --- src/Nri/Ui/Modal/V12.elm | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/Nri/Ui/Modal/V12.elm b/src/Nri/Ui/Modal/V12.elm index 26d5d8b5f..e4d3d932b 100644 --- a/src/Nri/Ui/Modal/V12.elm +++ b/src/Nri/Ui/Modal/V12.elm @@ -15,6 +15,7 @@ module Nri.Ui.Modal.V12 exposing {-| Patch changes: - adjust the padding of the heading when the close X is present for viewports less than 1000px wide + - add top/bottom fade indicators on the scrollable content area when content is out of view Changes from V11: @@ -713,6 +714,24 @@ viewInnerContent ({ visibleTitle } as config) = else Css.paddingBottom (Css.px 40) + + -- Scroll-shadow fade: top and bottom fade in only when there + -- is content scrolled out of view. The first two gradients + -- ("local") scroll with the content and cover the fixed + -- shadow gradients while at the top/bottom edges; when you + -- scroll, they move out of view, revealing the fade. + , Css.property "background-image" + (String.join ", " + [ "linear-gradient(white 50%, rgba(255, 255, 255, 0))" + , "linear-gradient(rgba(255, 255, 255, 0), white 50%)" + , "linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0))" + , "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25))" + ] + ) + , Css.property "background-position" "top, bottom, top, bottom" + , Css.property "background-size" "100% 48px, 100% 48px, 100% 32px, 100% 32px" + , Css.property "background-repeat" "no-repeat" + , Css.property "background-attachment" "local, local, scroll, scroll" ] ] children