2026814 - Add fade to chat overflow

Status: RESOLVED FIXED

(Core :: Machine Learning: Frontend, enhancement)

Description

[Justin Levinsohn]

Attachment: Screenshot 2026-03-26 at 3.52.17 PM.png

Chat content currently cuts off abruptly at the top and bottom when overflowing. A fade should be applied.

• A fade is applied at the top of the chat content when content is scrollable above
• A fade is applied at the bottom of the chat content when content overflows below
• Fade matches design spec for:
  • color
  • opacity
  • gradient direction
• Fade appears only when content is overflowing (not when fully visible)

Figma Specs

• Light Mode
• Dark Mode

Comment 1

[Justin Levinsohn]

Attachment: Screenshot 2026-03-26 at 3.54.55 PM.png

Comment 2

[Justin Levinsohn]

Attachment: Screenshot 2026-03-26 at 3.55.10 PM.png

Comment 3

[Justin Levinsohn]

Attachment: Screenshot 2026-03-26 at 3.56.14 PM.png

Comment 4

[Justin Levinsohn]

There is a chance that with the gradient it is difficult to add a transparent linear gradient like this to the top and bottom of both full width and sidebar chat. If that's the case UX will explore a blur that visually appears similar.

Comment 5

[Giulia Cardieri (:giulia)]

Attachment: Bug 2026814: Include fade on smart window chat wrapper and adjust auto scroll

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/58440b6ddd0d
https://hg.mozilla.org/integration/autoland/rev/62994adabba1
Include fade on smart window chat wrapper and adjust auto scroll r=ai-frontend-reviewers,echa

Comment 7

[amarc]

https://hg.mozilla.org/mozilla-central/rev/62994adabba1