LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 09:19:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(inbox): align composer send and template buttons with the textarea

Browse Source 
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>
This commit is contained in:
Arnas Donauskas 2026-04-20 19:35:06 +03:00
parent 1707aeafb6
commit a90ae1d991
No known key found for this signature in database
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/inbox/message-composer.tsx
View File

@ -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>
);
}