Session Info: rows fade at the scroll edges instead of a hard cut

Merged
TE
4d ago
+45-1

Session Info: rows scrolled past the panel body's top or bottom now fade into the glass at that edge instead of a hard cut through a row.

Leo-ask: ask-b29e245e8e

We should have a bit of that, like blur fading thing for this area as well. Just a little bit. I also feel like, you know, is it? Is there a way to, like... well, I suppose, like, in most areas we have a pretty unobtrusive, but I wonder, like, how much more, like, subtle but nice but integrated we can get the whole, like, blur fade type situation.

The area is Session Info's Outputs list scrolled under the panel's top edge.

  • SessionInfo.tsx: the body follows its scroll edges with the shared useScrollEdges (summary/scrollEdges.ts), the same hook the Summary card, the + menu and the palette use. It marks data-fade-top / data-fade-bottom only while rows are past that edge.
  • sessionInfo.css: a mask fades those edges (12px top, 16px bottom, a little shorter than the Summary card's 14/22 so it stays quiet). It turns on or off per edge with no animated in-between state. Reduce Transparency drops it.
  • Perf: no per-scroll layout work beyond the existing hook (one passive scroll listener toggling two attributes, plus a ResizeObserver/MutationObserver pair). All of these are disconnected when the body unmounts (the callback ref gets null). No per-token work.
  • Risk: small. CSS plus one callback ref, confined to one component. Design spec: leo-workspace design/motion-and-polish.md rule 15 (scroll edges use the shared blur-fade, kept subtle).

šŸ¤– Generated with Claude Code
Agent session: agent session


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Session Info's Outputs list no longer hard-cuts through rows scrolled under the panel's top or bottom edge; rows now fade into the glass at those edges.

  • Reuses the shared useScrollEdges hook with a CSS mask that fades 12px at the top and 16px at the bottom, and drops under reduced transparency.
  • The mask toggles per edge without animation, adds no per-scroll layout work, and its listeners disconnect when the panel body unmounts.