From 769dd21dea144fb11fd30c92d0a478c53820f8bc Mon Sep 17 00:00:00 2001 From: GabrielDrapor Date: Sun, 23 Aug 2026 23:12:47 +0800 Subject: [PATCH 1/3] fix(ui): keep headerless tool-well first line clear of the copy button A headerless Astryx CodeBlock floats its copy button over the scroll viewport's top-right corner, so a long unbroken first line (a maka://archive URI, a long command) rendered straight under the button. Reserve the button's footprint with a float on the first line: wrapped text flows around the corner instead of colliding. Anchored on the line div rather than because 100+ line blocks wrap lines in content-visibility chunks whose layout containment would stop an outer float from shortening their line boxes. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01VqBZ8cP7wMpy1mXTrn3VDg --- packages/ui/src/styles.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index 0e5d42f3a5..7780a20fc3 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -670,6 +670,25 @@ a rhythm no other row in the panel has. */ --text-supporting-leading: var(--text-code-leading); } +/* A headerless CodeBlock floats its copy button over the viewport's top-right + corner, and a long unbroken first line — a maka://archive URI, a long + command — runs straight under it (markdown avoids this by always giving the + block a header toolbar; tool wells stay quiet on purpose). Reserve the + button's footprint with a float on the first line so wrapped text flows + around the corner instead of colliding. On the line div, not : 100+ + line blocks wrap lines in content-visibility chunks whose layout containment + would keep an outer float from shortening their line boxes. The lengths are + the button's geometry, not tunables: the 28px button inset spacing-2 (8px) + ends 20px past the code's spacing-4 (16px) inline padding — plus an 8px gap + — and its bottom edge sits 36px − spacing-3 (12px) = 24px below the first + line's top. Tool wells never enable line numbers, so the numbered-gutter + ::before cannot collide here. */ +.maka-tool-call-detail .astryx-codeblock:not(:has(.astryx-codeblock-header)) [data-line="1"]::before { + content: ''; + float: inline-end; + width: 28px; + height: 24px; +} .maka-tool-output-chunk { display: contents; } .maka-tool-output-chunk-stderr { color: var(--destructive); } .maka-tool-output-chunk-redacted { opacity: 0.65; } From d4a7838c96cf8234ca6da5e461cae1bb9701bd91 Mon Sep 17 00:00:00 2001 From: GabrielDrapor Date: Sun, 23 Aug 2026 23:49:49 +0800 Subject: [PATCH 2/3] fix(ui): ellipsize long tool-well header titles under the copy button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The first fix covered headerless wells; the reported overlap is in the HEADERED variant. A result headline title (often a long unbroken maka://archive URI) is a flex span with white-space: pre and visible overflow, so it runs under the header's copy button — and headerCompact draws no divider, so it reads as the well's first content line. Ellipsize the title inside the flex slot the header already sizes. Verified live against the packaged app via devtools: title now ends at the button's edge with an ellipsis. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01VqBZ8cP7wMpy1mXTrn3VDg --- packages/ui/src/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index 7780a20fc3..9e3d362307 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -689,6 +689,21 @@ width: 28px; height: 24px; } +/* The headered variant has the same collision inside its header row: the + title (often a long unbroken maka://archive URI headline) is a flex span + with white-space: pre and visible overflow, so it runs straight under the + header's copy button — and headerCompact draws no divider, so the title + reads as the well's first content line while colliding like an overlay. + Ellipsize it inside the title slot the header already sizes (flex: 1, + min-width: 0). display: block because a flex container will not ellipsize + its anonymous text; tool wells never render the collapsible chevron that + the flex display exists for. */ +.maka-tool-call-detail .astryx-codeblock-header .astryx-codeblock-title { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .maka-tool-output-chunk { display: contents; } .maka-tool-output-chunk-stderr { color: var(--destructive); } .maka-tool-output-chunk-redacted { opacity: 0.65; } From d230e07af073f58a53841156a985adecfa1bb681 Mon Sep 17 00:00:00 2001 From: GabrielDrapor Date: Mon, 24 Aug 2026 16:45:45 +0800 Subject: [PATCH 3/3] fix(ui): preserve literal spacing in ellipsized tool-well titles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Codex review P2: white-space: nowrap collapses runs of spaces, so a title like 'report final.txt' displayed as a different path — and the title is its only display (the copy button copies the body). Both pre and nowrap satisfy text-overflow's no-wrap requirement; keep pre. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01VqBZ8cP7wMpy1mXTrn3VDg --- packages/ui/src/styles.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index 9e3d362307..fe3bbb1ec7 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -697,12 +697,16 @@ Ellipsize it inside the title slot the header already sizes (flex: 1, min-width: 0). display: block because a flex container will not ellipsize its anonymous text; tool wells never render the collapsible chevron that - the flex display exists for. */ + the flex display exists for. white-space stays `pre`, not nowrap: both + satisfy text-overflow's no-wrap requirement, but nowrap would collapse + runs of spaces — and a title is often a literal path or command where + `report final.txt` and `report final.txt` are different names, with the + title as their only display (the copy button copies the body). */ .maka-tool-call-detail .astryx-codeblock-header .astryx-codeblock-title { display: block; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: pre; } .maka-tool-output-chunk { display: contents; } .maka-tool-output-chunk-stderr { color: var(--destructive); }