From a90ae1d9918e9c2f662614ab6de4562da55a216a Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Mon, 20 Apr 2026 19:35:06 +0300
Subject: [PATCH] fix(inbox): align composer send and template buttons with the
 textarea
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The \"Type '/' for quick replies\" hint used to live inside the
textarea's flex-1 column. With items-end on the parent row, the
column's height grew by the hint's line box and the buttons aligned
to *that* bottom — sitting one row below the textarea on screen.

Move the hint out to a sibling of the flex row. The row now only
measures the textarea, items-end aligns the buttons level with the
textarea's bottom, and the hint drops neatly below with a pl-11
indent so it stays aligned under the textarea's left edge
(w-9 button + gap-2 = 44px).

Verified structurally via source; the /inbox route itself requires
auth so the preview couldn't exercise the rendered UI. Typecheck
clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/inbox/message-composer.tsx | 46 ++++++++++++-----------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/inbox/message-composer.tsx b/src/components/inbox/message-composer.tsx
index db889e3..7e65a6a 100644
--- a/src/components/inbox/message-composer.tsx
+++ b/src/components/inbox/message-composer.tsx
@@ -94,28 +94,23 @@ export function MessageComposer({
           <LayoutTemplate className="h-4 w-4" />
         </Button>
 
-        <div className="relative flex-1">
-          <textarea
-            ref={textareaRef}
-            value={text}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            placeholder={
-              sessionExpired
-                ? "Session expired - use a template"
-                : "Type a message... (Shift+Enter for new line)"
-            }
-            disabled={sessionExpired}
-            rows={1}
-            className={cn(
-              "w-full resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-emerald-500/50",
-              sessionExpired && "cursor-not-allowed opacity-50"
-            )}
-          />
-          <p className="mt-1 text-[10px] text-slate-600">
-            Type &apos;/&apos; for quick replies
-          </p>
-        </div>
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            sessionExpired
+              ? "Session expired - use a template"
+              : "Type a message... (Shift+Enter for new line)"
+          }
+          disabled={sessionExpired}
+          rows={1}
+          className={cn(
+            "flex-1 resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-emerald-500/50",
+            sessionExpired && "cursor-not-allowed opacity-50"
+          )}
+        />
 
         <Button
           size="sm"
@@ -126,6 +121,13 @@ export function MessageComposer({
           <Send className="h-4 w-4" />
         </Button>
       </div>
+
+      {/* Hint sits outside the flex row so its height doesn't push
+          `items-end` buttons below the textarea. Indented to line up
+          under the textarea left edge (w-9 button + gap-2 = 44px). */}
+      <p className="mt-1 pl-11 text-[10px] text-slate-600">
+        Type &apos;/&apos; for quick replies
+      </p>
     </div>
   );
 }