fix(ui): align activity error badges (#100163)

steipete-oai · steipete · web-flow · commit 8251c4094a18 · 2026-07-04T20:18:20.000-07:00
Co-authored-by: Peter Steinberger &lt;steipete@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@ Docs: https://docs.openclaw.ai
 
 ### Fixes
 
+- **Control UI activity alignment:** keep tool-call bubbles and per-tool error badges on one consistent right edge across desktop and narrow chat layouts.
 - **Status signal:** omit the redundant `Plugins: OK` row from compact `/status` output while retaining actionable plugin-health warnings and detailed plugin status.
 - **Control UI terminal rendering:** adopt the shared `@openclaw/libterminal` browser lifecycle and add Nerd Font fallbacks so icon-enabled shell listings render their glyphs when a compatible local font is installed.
 - **Slack transcript history:** let Codex app-server own its persisted assistant replies so Slack does not append redundant delivery-mirror rows, while the Control UI keeps legacy duplicate mirrors hidden.
diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts
@@ -82,6 +82,43 @@ function iconSvg() {
   return `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>`;
 }
 
+function activityErrorAlignmentHtml() {
+  return `
+    <div class="chat-thread" role="log">
+      <div class="chat-thread-inner">
+        <div class="chat-group tool chat-group--activity">
+          <div class="chat-avatar tool">A</div>
+          <div class="chat-group-messages">
+            <div class="chat-activity-group is-open">
+              <button class="chat-activity-group__summary chat-activity-group__summary--error" type="button">
+                <span class="chat-activity-group__icon">${iconSvg()}</span>
+                <span class="chat-activity-group__label">Activity: 2 tools</span>
+                <span class="chat-activity-group__preview">Bash, Gateway</span>
+                <span class="chat-activity-group__badge">${iconSvg()}<span>Error</span></span>
+              </button>
+              <div class="chat-activity-group__body">
+                <div class="chat-bubble" data-activity-call-bubble>
+                  <div class="chat-text">Bash searched a deliberately long workspace path with enough detail to occupy the activity row and expose mismatched width constraints.</div>
+                </div>
+                <div class="chat-bubble chat-bubble--tool-shell">
+                  <div class="chat-tool-msg-collapse">
+                    <button class="chat-tool-msg-summary chat-tool-msg-summary--error" type="button">
+                      <span class="chat-tool-msg-summary__icon">${iconSvg()}</span>
+                      <span class="chat-tool-msg-summary__label">Tool error</span>
+                      <span class="chat-tool-msg-summary__names">Bash</span>
+                      <span class="chat-tool-msg-summary__error-badge">${iconSvg()}<span>Error</span></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 function chatBubbleActionsHtml() {
   return `
     <div class="chat-bubble-actions">
@@ -456,6 +493,27 @@ describeBrowserLayout("chat responsive browser layout", () => {
     }
   });
 
+  it.each([
+    [430, 720],
+    [1366, 900],
+  ] as const)("right-aligns activity errors with call bubbles at %sx%s", async (width, height) => {
+    const page = await openBrowserPage(width, height);
+    try {
+      await page.setContent(
+        `<!doctype html><html><head><style>${readUiCss()}</style></head><body>${activityErrorAlignmentHtml()}</body></html>`,
+      );
+
+      await expectNoHorizontalOverflow(page);
+      const callBubble = await getRect(page, "[data-activity-call-bubble]");
+      const errorSummary = await getRect(page, ".chat-tool-msg-summary--error");
+      const errorBadge = await getRect(page, ".chat-tool-msg-summary__error-badge");
+      expect(Math.abs(callBubble.right - errorSummary.right)).toBeLessThanOrEqual(1);
+      expect(Math.abs(errorBadge.right - (errorSummary.right - 8))).toBeLessThanOrEqual(1);
+    } finally {
+      await closeBrowserPage(page);
+    }
+  });
+
   it.each([
     [1120, 740],
     [1366, 900],
diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css
@@ -554,11 +554,14 @@
 }
 
 /* ── Activity group (a turn's run of tool rows) ── */
-.chat-group--activity .chat-group-messages {
+/* Keep the activity summary, call bubbles, and flat result rows on one width.
+   Include the role classes so this wins over the generic tool-group rule. */
+.chat-group.tool.chat-group--activity .chat-group-messages {
   max-width: min(760px, 100%);
 }
 
 .chat-activity-group {
+  width: 100%;
   min-width: 0;
   max-width: 100%;
 }

Original file line number	Diff line number	Diff line change
`@@ -554,11 +554,14 @@`
`554`	`554`	`}`
`555`	`555`
`556`	`556`	`/* ── Activity group (a turn's run of tool rows) ── */`
`557`		`-.chat-group--activity .chat-group-messages {`
	`557`	`+/* Keep the activity summary, call bubbles, and flat result rows on one width.`
	`558`	`+ Include the role classes so this wins over the generic tool-group rule. */`
	`559`	`+.chat-group.tool.chat-group--activity .chat-group-messages {`
`558`	`560`	`max-width: min(760px, 100%);`
`559`	`561`	`}`
`560`	`562`
`561`	`563`	`.chat-activity-group {`
	`564`	`+ width: 100%;`
`562`	`565`	`min-width: 0;`
`563`	`566`	`max-width: 100%;`
`564`	`567`	`}`