Skip to content

fix(ui): keep the process disclosure inside the reading measure - #5561

Merged
Astro-Han merged 2 commits into
mainfrom
fix/transcript-column-blowout
Sep 21, 2026
Merged

Astro-Han merged 2 commits into
mainfrom
fix/transcript-column-blowout

Conversation

@Astro-Han

Copy link
Copy Markdown
Contributor

Summary

The process disclosure's ::details-content animation grid had an implicit auto column track, which grows to the item's max-content: one unbreakable descendant inside .maka-processing-body (a long code line, an ellipsized command) widened the body past the 800px reading measure while the details' contain: paint boundary clipped every sibling at the column edge — the uniform mid-column text clipping seen in the release transcript. Reproduced live: injecting a wide child took the body from 800 to 2157px; pinning the column to minmax(0, 1fr) restores 800. Second defect on the same seam: the body's overflow: clip cut the Astryx tool rows' intentional 4px inline overhang (their padding/negative-margin pair lets hover surfaces reach the card edge; upstream absorbs it at every clip boundary — this one did not).

Fix, all inside the existing seam: pin the grid's column track, give the sequence the 4px inline padding where that overhang lands inside its paint boundary, and narrow the body's clip to the block axis (the only axis the wipe animation needs). The stale ProcessingBlock comment — still describing the scrollable capped card removed in #5518 — now describes the actual disclosure. Same PR also drops the dead declarations the audit proved removable: .maka-chat-layout duplicated the upstream ChatLayout root, position:relative on .maka-chat-shell/.maka-chatContent has no containing-block consumer, three width:100%/opacity:1 declarations are stretch-redundant or leftovers, and .agents-chat-view-root duplicated .agents-chat-panel byte for byte.

Verification

  • npm run smoke:storybook — 384 stories / 416 theme renders pass, including CompletedProcessExpanded with the new assertions (every body child must stay within the details' own box).
  • Defect detection proven by targeted mutation on the built bundle: removing the grid-template-columns pin from the live rule makes the body measure 941 > 800 — the assertion fails as intended.
  • Live CSSOM ablation on main before cutting: removing the deleted declarations produced byte-identical geometry at every joint, including the prompt rail's sticky position under scroll.
  • npm run format, npm run lint, npm --workspace @maka/desktop run typecheck:stories — clean.

completed-process-expanded, 1200px — left BEFORE (main build), right AFTER (branch). Body content insets 4px where the row overhang lands; the long Bash command ellipsizes inside the column instead of pushing siblings off it.

light
dark

AI use

  • Generative tooling made a substantive contribution

Tool(s) and scope: Devin — audit probes, diagnosis, implementation and verification.

Checklist

  • Tests cover the change and fail without it
  • Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

  • Yes — described under Summary above

Astro-Han and others added 2 commits September 21, 2026 14:55
The ::details-content grid animating the process disclosure had an implicit
auto column track, which grows to the item's max-content: one unbreakable
descendant (a long code line, an ellipsized command) widened the processing
body past the reading measure while the details' paint containment clipped
every sibling at the column edge — the uniform clipped-text failure seen in
the release screenshot. Pin the column to the grid's inline size so wide
content overflows inside its own block instead.

The body also clipped the tool rows' intentional 4px inline overhang (the
Astryx padding/negative-margin pair that lets hover surfaces reach the card
edge). The sequence now supplies that space as its own padding, and the body
keeps only the block-axis clip the disclosure wipe needs.

Refresh the stale ProcessingBlock comment, which still described the
scrollable capped card removed in #5518, and assert the contract in the
disclosure story: no child of the body may exceed the details' own box.

Generated-by: Devin

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Verified by live CSSOM ablation (declarations removed from the served rules,
every joint's geometry byte-identical, including the prompt rail's sticky
position under scroll):

- .maka-chat-layout duplicated the upstream ChatLayout root's display/flex/
  min-height/width; only overscroll-behavior is product-owned.
- position:relative on .maka-chat-shell and .maka-chatContent has no
  consumer: the prompt rail anchors to its own sticky host, quote actions
  use a fixed layer, virtua items resolve against their spacer.
- width:100% on .maka-chat-message, .maka-chat-message-list and
  .maka-transcript-turn is stretch/redundant in every context; opacity:1 on
  .maka-chat-message is a leftover from the streaming fade-in.
- .agents-chat-view-root duplicated .agents-chat-panel byte for byte; merge
  the selectors.

Generated-by: Devin

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@github-actions github-actions Bot added the effort/S Under 100 readable lines label Sep 21, 2026

@jackwener jackwener left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reviewed ef76ad7ad5f3a2ec8c167b670d3e3017ba4e53d6.

No P0–P2.

An implicit auto column on ::details-content will grow to max-content; grid-template-columns: minmax(0, 1fr) pins that track to the reading measure. Sequence padding-inline: 4px is where the tool-row overhang lands; the body clips only on the block axis for the wipe. The CompletedProcessExpanded story now fails if a long child widens the body past the details box. I did not independently re-run the CSSOM ablation of the deleted column declarations.

Required check test is green on this head.

简体中文

我审查了 ef76ad7ad5f3a2ec8c167b670d3e3017ba4e53d6。没有 P0–P2。

::details-content 的隐式 auto 列会跟着 max-content 撑开,minmax(0, 1fr) 把列钉在阅读宽度上。工具行 4px 外伸落在 sequence 的 padding 里。故事会在长子项撑破 details 时失败。删掉的列声明我没有自己做 CSSOM 消融。本 head 上 test 绿。


Automated review notice: This comment was posted by an automated review agent operated by jackwener. It is not an independent human review and does not replace one.

@Astro-Han
Astro-Han marked this pull request as ready for review September 21, 2026 13:02
@Astro-Han
Astro-Han merged commit 1a89a84 into main Sep 21, 2026
3 checks passed
@Astro-Han
Astro-Han deleted the fix/transcript-column-blowout branch September 21, 2026 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/S Under 100 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants