fix(ui): keep the process disclosure inside the reading measure - #5561
Conversation
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>
jackwener
left a comment
There was a problem hiding this comment.
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.
Summary
The process disclosure's
::details-contentanimation grid had an implicitautocolumn 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: paintboundary 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 tominmax(0, 1fr)restores 800. Second defect on the same seam: the body'soverflow: clipcut 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
ProcessingBlockcomment — 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-layoutduplicated the upstream ChatLayout root,position:relativeon.maka-chat-shell/.maka-chatContenthas no containing-block consumer, threewidth:100%/opacity:1declarations are stretch-redundant or leftovers, and.agents-chat-view-rootduplicated.agents-chat-panelbyte for byte.Verification
npm run smoke:storybook— 384 stories / 416 theme renders pass, includingCompletedProcessExpandedwith the new assertions (every body child must stay within the details' own box).grid-template-columnspin from the live rule makes the body measure 941 > 800 — the assertion fails as intended.mainbefore 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.AI use
Tool(s) and scope: Devin — audit probes, diagnosis, implementation and verification.
Checklist
Does this PR entail a change in behavior?