fix(composer): let messages fade right up to the composer edge

Overlap the composer wrap with the message region by its top padding so messages scroll under the fade until the input outline, and paint the solid backdrop only below the composer's top edge. Drop the dark theme rule that still painted the whole wrap, keep the fade at 16px with a stronger curve, and lift the scroll-to-bottom button to preserve its gap.

Release note: 修复深色主题下聊天输入框上方残留的实色横条,消息可一直淡出到输入框边缘。
This commit is contained in:
mesalogo
2026-10-10 01:13:44 +08:00
parent d9dcb65d10
commit c7f09e1e53
2 changed files with 27 additions and 5 deletions
+26 -4
View File
@@ -6483,7 +6483,7 @@ button > svg {
.chat-scroll-to-bottom {
position: absolute;
z-index: 2;
bottom: var(--space-3);
bottom: var(--space-6);
left: 50%;
display: grid;
width: 40px;
@@ -7913,10 +7913,18 @@ button > svg {
width: 100%;
max-width: 100%;
min-width: 0;
/* Overlap the message region by the top padding so messages run under the
fade right up to the composer outline instead of stopping at a solid band. */
margin-top: calc(-1 * var(--space-3));
padding:
var(--space-3)
var(--chat-inline-padding)
var(--space-2);
pointer-events: none;
}
.composer-wrap > * {
pointer-events: auto;
}
.composer-wrap::before {
@@ -7925,17 +7933,32 @@ button > svg {
bottom: calc(100% - var(--space-3));
left: 0;
z-index: -1;
height: var(--space-6);
height: var(--space-4);
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
color-mix(in srgb, var(--composer-fade-color) 55%, transparent) 35%,
color-mix(in srgb, var(--composer-fade-color) 90%, transparent) 70%,
var(--composer-fade-color)
);
content: "";
pointer-events: none;
}
/* Below the composer the wrap stays opaque so nothing shows through its
bottom padding and metadata row. */
.composer-wrap::after {
position: absolute;
top: var(--space-3);
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--composer-fade-color);
content: "";
pointer-events: none;
}
.composer {
width: 100%;
max-width: 100%;
@@ -17773,7 +17796,6 @@ textarea.field-control {
.settings-page,
.workspace,
.chat,
.composer-wrap,
.workspace-panel-scroll
) {
background: var(--surface-canvas);