From 4b4be7448edde9cc2590abe891ac6dac01def4bc Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sun, 9 Aug 2026 14:43:14 -0700
Subject: [PATCH] fix(ui): pin compact task-suggestion split button to the card
 top-right (#121246)

- Uses a four-column grid with inline top-row actions to keep the compact control pinned to the card corner.
- Fixes both split halves at 26px, eliminating the chevron overhang.

Release-note context: the suggested-task card's action button is now a compact split control in the top-right corner, matching the intended design.
---
 .../chat/components/chat-task-suggestions.ts  | 26 ++++++++--------
 ui/src/styles/chat/layout.css                 | 31 ++++++++++++++-----
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/ui/src/pages/chat/components/chat-task-suggestions.ts b/ui/src/pages/chat/components/chat-task-suggestions.ts
index 6b9cfdbcd591..cc52c56eca42 100644
--- a/ui/src/pages/chat/components/chat-task-suggestions.ts
+++ b/ui/src/pages/chat/components/chat-task-suggestions.ts
@@ -69,19 +69,6 @@ export function renderChatTaskSuggestions(props: {
                 </div>
               </details>
             </div>
-            ${props.canDismiss
-              ? html`
-                  <button
-                    class="btn btn--ghost btn--icon task-suggestion__dismiss"
-                    type="button"
-                    ?disabled=${busy}
-                    aria-label=${t("chat.taskSuggestions.dismiss", { title })}
-                    @click=${() => props.onDismiss(suggestion)}
-                  >
-                    ${icons.x}
-                  </button>
-                `
-              : nothing}
             <div class="task-suggestion__actions">
               <div class="task-suggestion__split">
                 <button
@@ -165,6 +152,19 @@ export function renderChatTaskSuggestions(props: {
                   : nothing}
               </div>
             </div>
+            ${props.canDismiss
+              ? html`
+                  <button
+                    class="btn btn--ghost btn--icon task-suggestion__dismiss"
+                    type="button"
+                    ?disabled=${busy}
+                    aria-label=${t("chat.taskSuggestions.dismiss", { title })}
+                    @click=${() => props.onDismiss(suggestion)}
+                  >
+                    ${icons.x}
+                  </button>
+                `
+              : nothing}
           </article>
         `;
       })}
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 8c859dd6e269..bc8170d8692e 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -1586,7 +1586,7 @@ openclaw-chat-video-player {
 .task-suggestion {
   position: relative;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: start;
   gap: 12px;
   padding: 12px;
@@ -1667,25 +1667,32 @@ openclaw-chat-video-player {
 }
 
 .task-suggestion__actions {
-  grid-column: 2 / -1;
   display: flex;
   align-items: center;
+  align-self: start;
   justify-self: end;
 }
 
+/* Compact split control pinned to the card's top-right; both halves share one
+   fixed height so the chevron cap can never overhang the primary segment. */
 .task-suggestion__split {
   display: inline-flex;
   align-items: stretch;
+  height: 26px;
 }
 
 .task-suggestion__start {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
+  height: 26px;
+  padding: 0 10px;
   border-color: var(--accent);
   border-radius: var(--radius-md) 0 0 var(--radius-md);
   background: var(--primary);
   color: var(--primary-foreground);
+  font-size: 12px;
+  line-height: 1;
   white-space: nowrap;
 }
 
@@ -1693,11 +1700,19 @@ openclaw-chat-video-player {
   border-radius: var(--radius-md);
 }
 
+.task-suggestion__start svg {
+  width: 12px;
+  height: 12px;
+}
+
 .task-suggestion__menu-trigger {
-  min-width: 34px;
-  height: 100%;
+  display: grid;
+  width: 26px;
+  min-width: 26px;
+  height: 26px;
   margin-left: -1px;
-  padding: 8px;
+  padding: 0;
+  place-items: center;
   border-color: var(--accent);
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
   background: var(--primary);
@@ -1705,8 +1720,8 @@ openclaw-chat-video-player {
 }
 
 .task-suggestion__menu-trigger svg {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
 }
 
 .task-suggestion__menu[open] .task-suggestion__menu-trigger svg {