diff --git a/ui/src/e2e/chat-composer-redesign.e2e.test.ts b/ui/src/e2e/chat-composer-redesign.e2e.test.ts index 1fbf5bee4f91..ef3145cf1a34 100644 --- a/ui/src/e2e/chat-composer-redesign.e2e.test.ts +++ b/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({ diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index aa7c4623395a..e2c3bfec9bc4 100644 --- a/ui/src/styles/chat/layout.css +++ b/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); }