Fade the strip's right edge only when content overflows

[sohamM97]

Problem

The Today tab's "Also done today" chip strip and the Suggested pill band each wrapped themselves in an unconditional ShaderMask, fading the rightmost ~12% of the viewport. Two consequences:

• The last chip looked dimmed even when the whole row fit on screen with room to spare.
• It stayed dimmed after scrolling to the far right — exactly when there was nothing left to scroll to.

Fix

Drive the fade from the strip's scroll metrics instead: a new _FadeRightEdge widget listens to ScrollMetricsNotification + ScrollNotification and paints the mask only while extentAfter > 0. Metrics arrive during layout, so the rebuild is deferred to a post-frame callback.

One subtlety, caught by a test rather than by review: toggling the mask re-parents the strip, so without a GlobalKey the Scrollable is rebuilt from scratch on every toggle and snaps back to offset 0 — the first swipe would undo itself and the fade could never clear. The child is kept under a KeyedSubtree with a GlobalKey so the live scroll position survives both re-parents.

Applied to both strips, since they share the helper.

Testing

Automated — 7 fade-specific tests in test/screens/todays_five_screen_test.dart (file now 91 tests; full suite 1566 passed / 1 skipped, flutter analyze clean):

Test	Type
No ShaderMask when the chips fit on screen	Regression
ShaderMask applied when the chips overflow	Mechanism
Drag to the far right clears the fade (extentAfter == 0)	Regression
Scroll back from the end re-shows the fade, keeping the offset	Mechanism — fails if the GlobalKey is removed
Fades at 360x640 for chips that fit at desktop width	Edge case
Suggested band: no ShaderMask when it fits	Regression
Suggested band: ShaderMask when the columns overflow	Mechanism

Manual (desktop) — full /manual-test round passed: 15 functional tests across the chip strip, the pill band, and the mask-toggle regressions, plus 6 design checks in both themes.

⚠️ Not tested on device. The phone pass was deliberately skipped, so real-hardware behaviour rests on the automated 360x640 test only. Phone width is where these strips almost always overflow.

Also in here

• docs/UI_VIEWS.md — three behaviour claims found wrong while testing: "Done today" auto-navigates to the parent (no back arrow); chip tooltips fire on hover on desktop and tap on mobile; suggestions are recomputed on every expand, not just the first, so Hide + Show picks up new tasks without a restart.
• .claude/skills/manual-test/SKILL.md — must recommend rather than merely ask about /cleardb, and phrase width tests as maximise/restore (the dev window launches phone-shaped at 411x820; un-maximising returns to the last dragged size, so only a fresh launch gives true phone width).

Known, not addressed

The Suggested pill band looks ragged on a wide window with few suggestions — uneven top-row gaps from column-major widths, pills ellipsising at the ~260px cap with free width to spare, half-empty second row. Pre-existing since #78, logged as a TODO with the user's requirement that a single row shouldn't be forced into two when everything fits. Out of scope here.

🤖 Generated with Claude Code