(maka) branch main updated: fix(ui): contain expanded tool call rows (#3616)

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

Astro-Han pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/maka.git


The following commit(s) were added to refs/heads/main by this push:
     new 9e90b588f fix(ui): contain expanded tool call rows (#3616)
9e90b588f is described below

commit 9e90b588fcfea2a75b6f7472a1ebea43ddcd5603
Author: AstroHan <le...@outlook.com>
AuthorDate: Sun Aug 23 23:46:04 2026 +0800

    fix(ui): contain expanded tool call rows (#3616)
    
    Keep long expanded tool-call rows within the conversation width and cover the narrow grouped layout with a mutation-sensitive Storybook regression.
    
    Generated-by: Maka
---
 apps/desktop/src/renderer/styles/chat-message.css |  5 ++-
 packages/ui/stories/tool-activity.stories.tsx     | 49 +++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/renderer/styles/chat-message.css b/apps/desktop/src/renderer/styles/chat-message.css
index 6a3d192ba..3df4aa006 100644
--- a/apps/desktop/src/renderer/styles/chat-message.css
+++ b/apps/desktop/src/renderer/styles/chat-message.css
@@ -147,8 +147,11 @@
 
 /* Astryx clips the animated group body with overflow:hidden. `clip` preserves
    that visual boundary without becoming a scroll ancestor that captures the
-   nested sticky row. */
+   nested sticky row. The inner wrapper is also a grid item: without an explicit
+   zero minimum its long, nowrap call preview becomes the track's minimum size
+   and stretches every expanded row past the turn instead of ellipsizing it. */
 .maka-turn .maka-tool-activity-card > [role="button"] + div > div {
+  min-width: 0;
   overflow: clip;
 }
 
diff --git a/packages/ui/stories/tool-activity.stories.tsx b/packages/ui/stories/tool-activity.stories.tsx
index 5a8ab686c..2c77e0780 100644
--- a/packages/ui/stories/tool-activity.stories.tsx
+++ b/packages/ui/stories/tool-activity.stories.tsx
@@ -19,6 +19,7 @@
 
 import { useEffect, useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { ToolCallDetail, ToolTrow } from '../src/tool-activity.js';
 import type { ToolActivityItem } from '../src/materialize.js';
 import {
@@ -231,3 +232,51 @@ export const ContiguousDiffGroup: Story = {
     </Board>
   ),
 };
+
+const longIntentItems: ToolActivityItem[] = [
+  {
+    toolUseId: 'explore-agent-long-intent',
+    toolName: 'ExploreAgent',
+    displayName: '只读探索',
+    activityKind: 'tool',
+    status: 'completed',
+    intent: '审计模型选择、切换、持久化、event log、replay/resume 路径：当前模型事实由谁持有，何时切换，是否已有事件或消息可表达',
+    args: {},
+  },
+  {
+    toolUseId: 'explore-agent-long-intent-2',
+    toolName: 'ExploreAgent',
+    displayName: '只读探索',
+    activityKind: 'tool',
+    status: 'completed',
+    intent: '审计提示词构筑与缓存路径：追踪 durable system prompt、turnTailPrompt、provider-visible messages 与 request shape',
+    args: {},
+  },
+];
+
+// Regression path: a narrow conversation contains a grouped ExploreAgent run
+// whose intent summaries are much wider than the reading column. Expanding the
+// group must truncate those rows without widening the turn itself.
+export const LongIntentGroupNarrow: Story = {
+  args: { items: longIntentItems },
+  render: (args) => (
+    <div className="maka-turn" data-testid="narrow-turn" style={{ margin: '0 auto', width: 320 }}>
+      <ToolTrow items={args.items} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const turn = canvas.getByTestId('narrow-turn');
+    const group = turn.querySelector<HTMLElement>('.maka-tool-activity-card');
+    expect(group).not.toBeNull();
+    const disclosure = group!.querySelector<HTMLElement>(
+      ':scope > [role="button"][aria-controls]',
+    );
+    expect(disclosure).not.toBeNull();
+    await userEvent.click(disclosure!);
+    const rows = Array.from(group!.querySelectorAll<HTMLElement>('[role="button"]'));
+    expect(Math.max(...rows.map((row) => row.getBoundingClientRect().width))).toBeLessThanOrEqual(
+      turn.clientWidth + 8,
+    );
+  },
+};


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org