Merge pull request #68 from ArnasDon/fix/composer-alignment

fix(inbox): align composer send and template buttons with the textarea
This commit is contained in:
Arnas Donauskas 2026-04-20 19:37:28 +03:00 committed by GitHub
commit 185df34500
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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