From 088e5f1eeaa7bd6e33d930b07ea1a16327a33db5 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 13 Dec 2025 13:20:33 +0000
Subject: [PATCH] Align prompt input area with action column

---
 packages/ui/src/components/prompt-input.tsx   |  6 ++--
 .../ui/src/styles/messaging/prompt-input.css  | 36 +++++++++++++++----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index c8f7ef3e..f0f621a1 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -1086,8 +1086,9 @@ export default function PromptInput(props: PromptInputProps) {
               </For>
             </div>
           </Show>
-          <div class="prompt-input-field">
-            <textarea
+          <div class="prompt-input-field-container">
+            <div class="prompt-input-field">
+              <textarea
               ref={textareaRef}
               class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
               placeholder={
@@ -1167,6 +1168,7 @@ export default function PromptInput(props: PromptInputProps) {
             </Show>
           </div>
         </div>
+      </div>
 
         <div class="prompt-input-actions">
           <button
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index d202e702..8a7baaac 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -6,29 +6,47 @@
 }
 
 .prompt-input-wrapper {
-  @apply flex items-stretch gap-2 p-2;
+  @apply grid items-stretch;
+  grid-template-columns: minmax(0, 1fr) 64px;
+  gap: 0;
+  padding: 0;
 }
 
 .prompt-input-actions {
   @apply flex flex-col items-center justify-between;
   align-self: stretch;
   height: 100%;
-  padding: 0.25rem 0;
+  padding: 0.5rem 0.25rem;
   gap: 0.5rem;
 }
 
-.prompt-input-field {
+.prompt-input-field-container {
   position: relative;
   width: 100%;
+  min-height: 56px;
+  flex: 1 1 auto;
+  height: 100%;
+  min-width: 0;
+}
+
+.prompt-input-field {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 
  .prompt-input {
-   @apply flex-1 w-full min-h-[56px] max-h-[96px] pl-3 pr-10 pt-2.5 pb-4 border rounded-md text-sm resize-none outline-none transition-colors;
+   @apply w-full pl-3 pr-10 pt-2.5 border text-sm resize-none outline-none transition-colors;
    font-family: inherit;
    background-color: var(--surface-base);
    color: inherit;
    border-color: var(--border-base);
    line-height: var(--line-height-normal);
+   border-radius: 0;
+   padding-bottom: 0;
+   height: 100%;
+   min-height: 100%;
  }
 
 
@@ -264,6 +282,12 @@
   }
 }
 
+@media (max-width: 720px) {
+  .prompt-input-wrapper {
+    grid-template-columns: minmax(0, 1fr) 40px;
+  }
+}
+
 @media (max-width: 640px) {
   .prompt-input {
     min-height: 64px;
@@ -272,7 +296,7 @@
   }
 
   .prompt-input-wrapper {
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: 0;
+    padding: 0;
   }
 }