fix(ui): separate stop action from microphone picker (#125669)

ui/src/e2e/chat-composer-redesign.e2e.test.ts

@@ -572,6 +572,25 @@ suite.define(() => {
       await textarea.fill("");
       const stop = page.getByRole("button", { name: "Stop generating" });
       await expect.poll(() => stop.isVisible()).toBe(true);
+      await voice.hover();
+      await expect
+        .poll(() => microphonePickerShell.evaluate((node) => getComputedStyle(node).opacity))
+        .toBe("1");
+      const [runningVoiceBox, runningPickerBox, runningStopBox] = await Promise.all([
+        voice.boundingBox(),
+        microphonePicker.boundingBox(),
+        stop.boundingBox(),
+      ]);
+      expect(runningVoiceBox).not.toBeNull();
+      expect(runningPickerBox).not.toBeNull();
+      expect(runningStopBox).not.toBeNull();
+      if (!runningVoiceBox || !runningPickerBox || !runningStopBox) {
+        throw new Error("expected running composer action layout boxes");
+      }
+      const microphonePickerGap = runningPickerBox.x - (runningVoiceBox.x + runningVoiceBox.width);
+      const stopGap = runningStopBox.x - (runningPickerBox.x + runningPickerBox.width);
+      expect(microphonePickerGap).toBeLessThanOrEqual(1);
+      expect(stopGap).toBeGreaterThanOrEqual(8);
       await textarea.press("Escape");
       const abortRequest = await gateway.waitForRequest("chat.abort");
       expect(abortRequest.params).toMatchObject({

ui/src/styles/chat/layout.css

@@ -3040,7 +3040,7 @@ button.chat-pr__diff {
 .agent-chat__composer-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   flex: 0 0 auto;
 }
 
@@ -3633,7 +3633,7 @@ button.chat-pr__diff {
   --chat-voice-hover-color: var(--text);
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 0;
   flex: 0 0 auto;
 }
 
@@ -4053,7 +4053,8 @@ button.chat-pr__diff {
 
   .agent-chat__composer-actions {
     flex-direction: column;
-    gap: 4px;
+    row-gap: 4px;
+    column-gap: 8px;
     margin-left: var(--chat-box-inset);
   }