Scroll Fade

A soft gradient fade at the bottom of a bounded, scrolling list, so the last rows dissolve into the surface below rather than ending on a hard cut — more elegant, and a quiet “there’s more below” cue. Drop it as the last child of the list’s relative wrapper (before any OverlayScrollbar, so the thumb paints over it) and give the scroller’s content pb-6 so the final row clears the fade at scroll-end. Scroll each list to compare.

Gate both on useOverflowY(scroller, content). A capped list only sometimes fills its cap, and on a list that already fits the fade paints over nothing while its pb-6 becomes 24px of dead space under the last row — which lands on top of whatever gap follows. That is what made the booking dialog read loose: one 48px gap in a panel spaced on 24.

With the fade — rows dissolve into the surface

  • 8:00 AM
  • 9:00 AM
  • 10:00 AM
  • 11:00 AM
  • 12:00 PM
  • 1:00 PM
  • 2:00 PM
  • 3:00 PM
  • 4:00 PM

Without — the hard cut it replaces

  • 8:00 AM
  • 9:00 AM
  • 10:00 AM
  • 11:00 AM
  • 12:00 PM
  • 1:00 PM
  • 2:00 PM
  • 3:00 PM
  • 4:00 PM

A list that fits — no fade, and no room held for one

  • 8:00 AM
  • 9:00 AM
Theme