adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-10-03 17:53:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): soften long-message scroll indicator to a fade (#1531)

Browse source 
Replace the hard inset box-shadow scroll indicators on long user
messages with a mask-image gradient so the text softly fades at the
scroll edges instead of showing a heavy shadow.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
This commit is contained in:
Caroline di Vittorio 2026-06-15 13:32:05 -07:00 • committed by GitHub
parent 3ce09c0864
commit 147a393ed0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/src/components/agents/messages/UserMessage.tsx
View file

@ -24,12 +24,14 @@ export function UserMessage({ message }: { message: Message }) {
updateScrollIndicators(); updateScrollIndicators();
}, [text, updateScrollIndicators]); }, [text, updateScrollIndicators]);
const textEdgeShadows = [ const topStop = scrolledFromTop ? "transparent 0, black 24px" : "black 0";
scrolledFromTop ? "inset 0 12px 10px -10px rgba(42, 63, 95, 0.95)" : "", const bottomStop = scrolledFromBottom
scrolledFromBottom ? "inset 0 -12px 10px -10px rgba(42, 63, 95, 0.95)" : "", ? "black calc(100% - 24px), transparent 100%"
] : "black 100%";
.filter(Boolean) const textEdgeMask =
.join(", "); scrolledFromTop || scrolledFromBottom
? `linear-gradient(to bottom, ${topStop}, ${bottomStop})`
: undefined;
return ( return (
<div className="flex justify-end my-4"> <div className="flex justify-end my-4">
@ -54,7 +56,10 @@ export function UserMessage({ message }: { message: Message }) {
ref={textRef} ref={textRef}
onScroll={updateScrollIndicators} onScroll={updateScrollIndicators}
className="max-h-[250px] overflow-auto px-3 py-1.5 text-[color:var(--ui-text)] text-[13px] whitespace-pre-wrap break-words" className="max-h-[250px] overflow-auto px-3 py-1.5 text-[color:var(--ui-text)] text-[13px] whitespace-pre-wrap break-words"
style={{ boxShadow: textEdgeShadows || "none" }} style={{
maskImage: textEdgeMask,
WebkitMaskImage: textEdgeMask,
}}
> >
{text} {text}
</div> </div>