From b0e89472fef7be216354969cf82e8a6cc6b4cdf5 Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Wed, 29 Apr 2026 13:27:45 +0200
Subject: [PATCH] feat: tighten chat box (bg-surface-input, single-line input,
 padding)

- Switch the chat input card background to bg-surface-input so the input
  area visually separates from surrounding surfaces.
- Convert the @ context-picker trigger to <Button variant="subtle">
  with btnClasses="!px-1.5 !py-0.5 font-mono" so it matches the send
  button's design-system styling.
- Remove the textarea's border and focus outline (border / outline /
  box-shadow forced to none with !important across the regular and
  focus states) so the textarea sits flush within the card.
- Shrink the resting textarea height: rows={1} on all three textareas
  (ContextTextarea, APP-mode, default-mode); autosize still grows it as
  the user types.
- Bump chat box internal padding by one step for breathing room:
  px-1 pt-1 -> px-2 pt-2 above the textarea, and px-2 pb-1.5 pt-0.5 ->
  px-3 pb-2 pt-1 on the controls row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/copilot/chat/AIChatDisplay.svelte  | 15 +++++++++------
 .../components/copilot/chat/AIChatInput.svelte    |  4 ++--
 .../copilot/chat/ContextTextarea.svelte           | 12 ++++++++++--
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index 47e726b937..cc2c3aefee 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -176,9 +176,9 @@
 			</div>
 		{/if}
 		<div
-			class="rounded-xl border border-light bg-surface shadow-sm transition-all focus-within:shadow-md focus-within:border-gray-300 dark:focus-within:border-gray-600"
+			class="rounded-xl border border-light bg-surface-input shadow-sm transition-all focus-within:shadow-md focus-within:border-gray-300 dark:focus-within:border-gray-600"
 		>
-			<div class="px-1 pt-1">
+			<div class="px-2 pt-2">
 				<AIChatInput
 					bind:this={aiChatInput}
 					bind:selectedContext
@@ -187,7 +187,7 @@
 					isFirstMessage={messages.length === 0}
 				/>
 			</div>
-			<div class="flex flex-row items-center justify-between gap-2 px-2 pb-1.5 pt-0.5">
+			<div class="flex flex-row items-center justify-between gap-2 px-3 pb-2 pt-1">
 				<div class="flex flex-row items-center gap-x-1.5 min-w-0 flex-wrap">
 					{#if aiChatManager.mode === 'script' && hasDiff}
 						<ChatQuickActions {askAi} {diffMode} />
@@ -200,12 +200,15 @@
 						{#if aiChatManager.mode === AIMode.SCRIPT || aiChatManager.mode === AIMode.FLOW || aiChatManager.mode === AIMode.APP}
 							<Popover>
 								{#snippet trigger()}
-									<div
-										class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+									<Button
+										variant="subtle"
+										size="xs"
 										title="Add context"
+										btnClasses="!px-1.5 !py-0.5 font-mono"
+										nonCaptureEvent
 									>
 										@
-									</div>
+									</Button>
 								{/snippet}
 								{#snippet content({ close })}
 									{#if aiChatManager.mode === AIMode.APP}
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index eabeacc25f..2152d0ac17 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -444,7 +444,7 @@
 						sendRequest()
 					}
 				}}
-				rows={2}
+				rows={1}
 				placeholder={modePlaceholder}
 				class="resize-none"
 				{disabled}
@@ -490,7 +490,7 @@
 						sendRequest()
 					}
 				}}
-				rows={2}
+				rows={1}
 				placeholder={modePlaceholder}
 				class="resize-none"
 				{disabled}
diff --git a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
index 14e54deea9..6886575415 100644
--- a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
@@ -315,7 +315,7 @@
 		onkeydown={handleKeyDown}
 		bind:value
 		use:autosize
-		rows={2}
+		rows={1}
 		oninput={handleInput}
 		onblur={() => {
 			setTimeout(() => {
@@ -372,7 +372,9 @@
 <style>
 	.textarea-input {
 		padding: 0.25rem;
-		border: 1px solid transparent;
+		border: none !important;
+		outline: none !important;
+		box-shadow: none !important;
 		border-radius: 0.75rem; /* matches rounded-xl */
 		font-family: inherit;
 		font-size: 0.75rem;
@@ -382,4 +384,10 @@
 		width: 100%;
 		min-height: 1.75rem;
 	}
+	.textarea-input:focus,
+	.textarea-input:focus-visible {
+		border: none !important;
+		outline: none !important;
+		box-shadow: none !important;
+	}
 </style>