You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@maka.apache.org by as...@apache.org on 2026/09/01 12:45:48 UTC
(maka) branch fix/chat-composer-fade-mask-height created (now eaf73dac3f)
This is an automated email from the ASF dual-hosted git repository.
Astro-Han pushed a change to branch fix/chat-composer-fade-mask-height
in repository https://gitbox.apache.org/repos/asf/maka.git
at eaf73dac3f fix(ui): size the composer's fade mask to the dock it covers
This branch includes the following new commits:
new eaf73dac3f fix(ui): size the composer's fade mask to the dock it covers
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org
(maka) 01/01: fix(ui): size the composer's fade mask to the dock it covers
Posted by as...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
Astro-Han pushed a commit to branch fix/chat-composer-fade-mask-height
in repository https://gitbox.apache.org/repos/asf/maka.git
commit eaf73dac3fd5ae014613102c480e7b0df497b373
Author: AstroHan <le...@outlook.com>
AuthorDate: Tue Sep 1 20:45:33 2026 +0800
fix(ui): size the composer's fade mask to the dock it covers
ChatLayout's frosted dock layer is a per-density constant — 80/100/120px —
while the dock it fades is sized by its content. At the `balanced` tier the
product ships, the 100px layer lands at y=684 against a dock container at
y=550 h=234: 90px inside the opaque composer, where the ramp cannot show, and
134px of transcript left crisp under the dock. The fade's only visible effect
was in the two gutters flanking the composer, where it worked correctly.
The layer now fills the dock container and sits behind its chrome. Density
keeps tuning the mask ramp; only the height stops being a constant. The
scroll button is in flow at the top of that container, so the layer moving to
`z-index: -1` is what keeps it reading crisply on top of the fade rather than
through it.
This is a deliberate visual change, not a no-op. Measured against live
computed styles and pixels on Product/Shell Official AppShell → Native
Conversation at 1180×788, both colour schemes: the uncovered band goes 134px →
0, and that band of transcript loses 66% (light) / 70% (dark) of its
horizontal-frequency energy while the band above the dock is unchanged.
Removing the layer entirely moves the scroll button's own pixels by a mean of
5.2/765, so it is not being blurred.
The composited backdrop-filter area goes from 916×100 to 916×234 on every
scroll frame, and that costs nothing measurable. Over 6×240 scroll frames in a
headed GPU-backed Chromium the frame-interval median holds at 8.3ms, p95 moves
9.0ms → 9.1ms, no frame exceeds 20ms, and total GPUTask time per 240 frames
goes 1.8ms → 2.2ms.
It is a patch rather than product CSS because there is nothing to override
from: ChatLayout renders the layer with `stylex.props()` alone — no
`themeProps`, no `data-*`, no custom property — so the only product handle is
a structural selector that breaks the moment a caller passes
`scrollButton={null}`. The hunk carries the fix until it ships upstream.
Refs #3446 (F3/F7 — one finding filed twice; F7's opaque-composer account is
already retracted in the issue, `.composer` is transparent).
Generated-by: Claude Code (claude-opus-5)
---
patches/@astryxdesign+core+0.5.2.patch | 89 ++++++++++++++++++++++++++++++++--
patches/README.md | 14 +++++-
2 files changed, 99 insertions(+), 4 deletions(-)
diff --git a/patches/@astryxdesign+core+0.5.2.patch b/patches/@astryxdesign+core+0.5.2.patch
index 039729b3e0..e3654880e3 100644
--- a/patches/@astryxdesign+core+0.5.2.patch
+++ b/patches/@astryxdesign+core+0.5.2.patch
@@ -19,7 +19,7 @@ index ff34874..0f5ae14 100644
export declare function ChatLayout({ children, composer, density, emptyState, scrollButton, scrollRef: externalScrollRef, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatLayoutProps): import("react").JSX.Element;
export declare namespace ChatLayout {
diff --git a/node_modules/@astryxdesign/core/dist/Chat/ChatLayout.js b/node_modules/@astryxdesign/core/dist/Chat/ChatLayout.js
-index ff9b9fa..6d4df27 100644
+index ff9b9fa..de27ced 100644
--- a/node_modules/@astryxdesign/core/dist/Chat/ChatLayout.js
+++ b/node_modules/@astryxdesign/core/dist/Chat/ChatLayout.js
@@ -28,7 +28,7 @@
@@ -31,7 +31,37 @@ index ff9b9fa..6d4df27 100644
import * as stylex from '@stylexjs/stylex';
import "../theme/tokens.stylex.js";
import { spacingVars } from "../theme/tokens.stylex.js";
-@@ -195,6 +195,7 @@ export function ChatLayout({
+@@ -85,7 +85,8 @@ const styles = {
+ kfzvcC: "x47corl",
+ k6WDB: "xvn2z4z",
+ keRtuK: "x67t5t6",
+- kZKoxP: "xpyat2d",
++ kZKoxP: "x5yr21d",
++ kY2c9j: "maka-x-blur-behind",
+ kX1K2I: "xw26lqc",
+ kAExgp: "x1bv1mxo",
+ $$css: true
+@@ -120,19 +121,16 @@ const styles = {
+ $$css: true
+ },
+ blurLayerCompact: {
+- kZKoxP: "xwzfr38",
+ kX1K2I: "xkm2don",
+ kAExgp: "xiy8rlo",
+ $$css: true
+ },
+ blurLayerBalanced: {
+- kZKoxP: "xpyat2d",
+ kX1K2I: "xw26lqc",
+ kAExgp: "x1bv1mxo",
+ $$css: true
+ },
+ blurLayerSpacious: {
+- kZKoxP: "x1wkxgih",
+ kX1K2I: "xr5yg4x",
+ kAExgp: "xo9xo30",
+ $$css: true
+@@ -195,6 +193,7 @@ export function ChatLayout({
className,
style,
'data-testid': testId,
@@ -39,7 +69,7 @@ index ff9b9fa..6d4df27 100644
ref,
...rest
}) {
-@@ -205,12 +206,21 @@ export function ChatLayout({
+@@ -205,12 +204,21 @@ export function ChatLayout({
// --- Default scroll behavior ---
const scroll = useChatStreamScroll({
@@ -459,6 +489,18 @@ index 3d2cf00..e527e9d 100644
}
-SideNavItem.displayName = 'SideNavItem';
+SideNavItem.displayName = 'SideNavItem';
+diff --git a/node_modules/@astryxdesign/core/dist/astryx.css b/node_modules/@astryxdesign/core/dist/astryx.css
+index 0159f32..654948b 100644
+--- a/node_modules/@astryxdesign/core/dist/astryx.css
++++ b/node_modules/@astryxdesign/core/dist/astryx.css
+@@ -1280,6 +1280,7 @@
+ .x1yn0g08:not(#\#):not(#\#):not(#\#){word-break:break-all}
+ .x13faqbe:not(#\#):not(#\#):not(#\#){word-break:break-word}
+ .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
++ .maka-x-blur-behind:not(#\#):not(#\#):not(#\#){z-index:-1}
+ .x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
+ .x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
+ .xfo81ep:not(#\#):not(#\#):not(#\#){z-index:1000}
diff --git a/node_modules/@astryxdesign/core/dist/hooks/useStreamingText.d.ts b/node_modules/@astryxdesign/core/dist/hooks/useStreamingText.d.ts
index 7a35d1c..50ee70b 100644
--- a/node_modules/@astryxdesign/core/dist/hooks/useStreamingText.d.ts
@@ -627,6 +669,47 @@ index 693d728..7d5724e 100644
- return targetText.slice(0, snapToGraphemeBoundary(targetText, displayedLen));
+ return targetText.slice(0, snapToGraphemeBoundary(targetText, renderedPresentation.displayedLen));
}
+diff --git a/node_modules/@astryxdesign/core/src/Chat/ChatLayout.tsx b/node_modules/@astryxdesign/core/src/Chat/ChatLayout.tsx
+index d45a912..efec9fd 100644
+--- a/node_modules/@astryxdesign/core/src/Chat/ChatLayout.tsx
++++ b/node_modules/@astryxdesign/core/src/Chat/ChatLayout.tsx
+@@ -177,7 +177,15 @@ const styles = stylex.create({
+ pointerEvents: 'none',
+ backdropFilter: 'blur(12px)',
+ WebkitBackdropFilter: 'blur(12px)',
+- height: 100,
++ // The fade has to cover exactly what the dock hides, and the dock's height
++ // is its content's. A per-density constant only matched by accident: at
++ // 'balanced' the 100px layer started 90px inside the opaque composer, so
++ // the ramp was invisible wherever the composer painted and the transcript
++ // stayed crisp right up to the dock's top edge.
++ height: '100%',
++ // Behind the dock's own chrome. The scroll button is in flow at the top of
++ // this container and belongs on top of the fade, not under it.
++ zIndex: -1,
+ maskImage: 'linear-gradient(to bottom, transparent, black 36px)',
+ WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 36px)',
+ },
+@@ -210,18 +218,16 @@ const styles = stylex.create({
+ paddingInline: spacingVars['--spacing-4'],
+ },
+
++ // Density tunes the ramp only — the layer's height follows the dock.
+ blurLayerCompact: {
+- height: 80,
+ maskImage: 'linear-gradient(to bottom, transparent, black 24px)',
+ WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 24px)',
+ },
+ blurLayerBalanced: {
+- height: 100,
+ maskImage: 'linear-gradient(to bottom, transparent, black 36px)',
+ WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 36px)',
+ },
+ blurLayerSpacious: {
+- height: 120,
+ maskImage: 'linear-gradient(to bottom, transparent, black 48px)',
+ WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 48px)',
+ },
diff --git a/node_modules/@astryxdesign/core/src/Chat/ChatToolCalls.tsx b/node_modules/@astryxdesign/core/src/Chat/ChatToolCalls.tsx
index f22bb1f..b710951 100644
--- a/node_modules/@astryxdesign/core/src/Chat/ChatToolCalls.tsx
diff --git a/patches/README.md b/patches/README.md
index d914256fcc..4169ece774 100644
--- a/patches/README.md
+++ b/patches/README.md
@@ -57,7 +57,7 @@ Streaming tool-call association for gateways that reuse or omit `index` / `id`
Delete when that guard passes against an unpatched package.
-## `@astryxdesign/core@0.5.0`
+## `@astryxdesign/core@0.5.2`
Five published component seams drop host-owned state or semantics:
@@ -92,4 +92,16 @@ Markdown can also transform the displayed prefix immediately before its
existing incremental parser, so host syntax such as math stays behind the
streaming cursor without adding another parser or scheduler.
+One hunk is a geometry fix rather than a seam. `ChatLayout`'s frosted dock
+layer is a per-density constant (80/100/120px) while the dock it fades is
+sized by its content. At `balanced` the 100px layer starts 90px inside the
+opaque composer, so the ramp is invisible wherever the composer paints and
+134px of transcript stays crisp under the dock — the fade only ever shows in
+the gutters flanking the composer. The layer now fills the dock container and
+sits behind its chrome, so the scroll button still reads crisply on top of it.
+No product override can reach this: the layer renders with `stylex.props()`
+alone — no `themeProps`, no `data-*`, no custom property — so the only handle
+is a structural selector that breaks the moment a caller passes
+`scrollButton={null}`. See #3446.
+
Delete each hunk when the corresponding behavior ships in Astryx.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org