From c064cea4cc0e39e8429e3618b07f9e8d0156b00c Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Wed, 25 Mar 2026 11:56:02 +0000
Subject: [PATCH] fix(ui): move prompt mic beside expand control

---
 packages/ui/src/components/prompt-input.tsx   | 94 ++++++++++---------
 .../ui/src/styles/messaging/prompt-input.css  | 24 ++++-
 2 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index 3b56c468..c06dbb02 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -543,10 +543,54 @@ export default function PromptInput(props: PromptInputProps) {
                 autocomplete="off"
               />
               <div class="prompt-nav-buttons">
-                <ExpandButton
-                  expandState={expandState}
-                  onToggleExpand={handleExpandToggle}
-                />
+                <div class="prompt-nav-top-row">
+                  <Show when={showVoiceInput()}>
+                    <button
+                      type="button"
+                      class={`prompt-voice-button prompt-nav-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
+                      onPointerDown={(event) => {
+                        event.preventDefault()
+                        beginVoicePress(event)
+                      }}
+                      onPointerUp={(event) => {
+                        event.preventDefault()
+                        endVoicePress()
+                      }}
+                      onPointerCancel={() => endVoicePress()}
+                      onLostPointerCapture={() => endVoicePress()}
+                      onKeyDown={(event) => {
+                        if (event.repeat) return
+                        if (event.key !== " " && event.key !== "Enter") return
+                        event.preventDefault()
+                        beginVoicePress(event)
+                      }}
+                      onKeyUp={(event) => {
+                        if (event.key !== " " && event.key !== "Enter") return
+                        event.preventDefault()
+                        endVoicePress()
+                      }}
+                      onBlur={() => endVoicePress()}
+                      disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
+                      aria-label={voiceInput.buttonTitle()}
+                      title={voiceInput.buttonTitle()}
+                    >
+                      <Show
+                        when={voiceInput.isRecording()}
+                        fallback={
+                          <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
+                            <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
+                          </Show>
+                        }
+                      >
+                        <span class="prompt-voice-timer">{formatVoiceTimer(voiceInput.elapsedMs())}</span>
+                      </Show>
+                    </button>
+                  </Show>
+                  <ExpandButton
+                    expandState={expandState}
+                    onToggleExpand={handleExpandToggle}
+                  />
+                </div>
                 <Show when={hasHistory()}>
                   <button
                     type="button"
@@ -634,48 +678,6 @@ export default function PromptInput(props: PromptInputProps) {
         </div>
 
         <div class="prompt-input-actions">
-          <Show when={showVoiceInput()}>
-            <button
-              type="button"
-              class={`prompt-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
-              onPointerDown={(event) => {
-                event.preventDefault()
-                beginVoicePress(event)
-              }}
-              onPointerUp={(event) => {
-                event.preventDefault()
-                endVoicePress()
-              }}
-              onPointerCancel={() => endVoicePress()}
-              onLostPointerCapture={() => endVoicePress()}
-              onKeyDown={(event) => {
-                if (event.repeat) return
-                if (event.key !== " " && event.key !== "Enter") return
-                event.preventDefault()
-                beginVoicePress(event)
-              }}
-              onKeyUp={(event) => {
-                if (event.key !== " " && event.key !== "Enter") return
-                event.preventDefault()
-                endVoicePress()
-              }}
-              onBlur={() => endVoicePress()}
-              disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
-              aria-label={voiceInput.buttonTitle()}
-              title={voiceInput.buttonTitle()}
-            >
-              <Show
-                when={voiceInput.isRecording()}
-                fallback={
-                  <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
-                    <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
-                  </Show>
-                }
-              >
-                <span class="prompt-voice-timer">{formatVoiceTimer(voiceInput.elapsedMs())}</span>
-              </Show>
-            </button>
-          </Show>
           <button
             type="button"
             class="stop-button"
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 8cfc8e63..31605f10 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -37,7 +37,7 @@
 .prompt-input {
   @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
   padding-inline-start: 0.75rem;
-  padding-inline-end: 2.5rem;
+  padding-inline-end: 5.5rem;
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -91,11 +91,19 @@
   bottom: 0.25rem;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   justify-content: flex-start;
   gap: 0.125rem;
   z-index: 2;
 }
 
+.prompt-nav-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.125rem;
+}
+
 .prompt-expand-button,
 .prompt-history-button {
   @apply w-7 h-7 flex items-center justify-center rounded-md;
@@ -200,6 +208,18 @@
   color: var(--button-danger-text, var(--text-inverted, #ffffff));
 }
 
+.prompt-nav-voice-button {
+  min-width: 1.75rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+}
+
+.prompt-nav-voice-button.is-recording {
+  min-width: 3.5rem;
+  width: auto;
+}
+
 .prompt-voice-button:disabled {
   @apply opacity-50 cursor-not-allowed;
 }
@@ -377,7 +397,7 @@
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
-    padding-inline-end: 2.5rem;
+    padding-inline-end: 5.5rem;
     padding-bottom: 0.75rem;
   }