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" /> <LayoutTemplate className="h-4 w-4" />
</Button> </Button>
<div className="relative flex-1"> <textarea
<textarea ref={textareaRef}
ref={textareaRef} value={text}
value={text} onChange={handleChange}
onChange={handleChange} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} placeholder={
placeholder={ sessionExpired
sessionExpired ? "Session expired - use a template"
? "Session expired - use a template" : "Type a message... (Shift+Enter for new line)"
: "Type a message... (Shift+Enter for new line)" }
} disabled={sessionExpired}
disabled={sessionExpired} rows={1}
rows={1} className={cn(
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",
"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"
sessionExpired && "cursor-not-allowed opacity-50" )}
)} />
/>
<p className="mt-1 text-[10px] text-slate-600">
Type &apos;/&apos; for quick replies
</p>
</div>
<Button <Button
size="sm" size="sm"
@ -126,6 +121,13 @@ export function MessageComposer({
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />
</Button> </Button>
</div> </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> </div>
); );
} }