fix(composer): blend the message fade into the composer outline

Extend the composer fade down to the input card's top edge and layer it beneath the card, so scrolling messages fade straight into the composer outline. Remove the full-width composer-wrap background that produced a hard horizontal band, and soften the focus ring. Keep the dark theme fade on the canvas color.

Release note: 优化聊天输入框上方的渐变过渡,消息自然淡出到输入框边缘,不再出现横向色带。
This commit is contained in:
mesalogo
2026-10-10 01:00:31 +08:00
parent 1044a32b3b
commit d9dcb65d10
3 changed files with 18 additions and 7 deletions
@@ -364,7 +364,7 @@ describe('WorkspacePrimitives', () => {
it('wraps native client and compaction actions without overlapping composer metadata', () => {
expect(stylesheet).toMatch(
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*background:\s*var\(--surface-raised\);/u
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*\}/u
)
expect(stylesheet).toMatch(
/\.composer-meta\s*\{[^}]*position:\s*relative;[^}]*min-height:\s*26px;[^}]*margin:\s*var\(--space-1\) 0 0;/u
+16 -5
View File
@@ -7907,7 +7907,9 @@ button > svg {
}
.composer-wrap {
--composer-fade-color: var(--surface-raised);
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
min-width: 0;
@@ -7915,16 +7917,21 @@ button > svg {
var(--space-3)
var(--chat-inline-padding)
var(--space-2);
background: var(--surface-raised);
}
.composer-wrap::before {
position: absolute;
right: 0;
bottom: 100%;
bottom: calc(100% - var(--space-3));
left: 0;
height: var(--space-4);
background: linear-gradient(to bottom, transparent, var(--surface-raised));
z-index: -1;
height: var(--space-6);
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
var(--composer-fade-color)
);
content: "";
pointer-events: none;
}
@@ -8400,7 +8407,7 @@ button > svg {
.composer:focus-within {
border-color: var(--accent);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
var(--shadow-card);
}
@@ -17772,6 +17779,10 @@ textarea.field-control {
background: var(--surface-canvas);
}
:root[data-theme='dark'] .composer-wrap {
--composer-fade-color: var(--surface-canvas);
}
:root[data-theme='dark'] :where(
.sidebar,
.topbar,