Reply Composer Notification Block for React

Edit the constants at the top of the file: THEM is who replied and when, BOARD where, ORIGINAL is what you wrote, REPLY what they answered and ME your initials. MAX is the reply limit, and the unseen copy that holds the room for the longest sent reply is built from it, so changing the limit keeps the height right.

Nothing leaves the page. Send (or Control or Command and Enter inside the box) keeps the text in the page, shows it as your message with "Sent in this demo" and moves focus to Edit; an empty reply is refused in words and focus stays in the box. Edit puts the text back in the box, and sending again updates it. To make it real, send the text to your backend in the post handler and show a failure in the status line under the thread.

Control and Enter on most systems, Command and Enter on an Apple device: the hint shows the right one after the page loads. A plain Enter adds a line. The counter ("12 / 120") is for the eye; the polite status line says only when it matters, at 20 and 10 characters to go and at the limit, so a screen reader is not read every keystroke.

The quote's band keeps the height of the full text in an unseen copy, so Show more and Show less never push the reply and the box down. The gap shrinks as the screen widens and the text needs fewer lines.

Show more is a button that reports whether the quote is expanded and names it. The box has a label (visually hidden) and a description that spells out the keys. Cancel returns focus to Reply back or to Edit, whichever opened the box, and the unseen layers are inert, so Tab only reaches what is showing.

Everything stacks as it is. The key hint is dropped under the small breakpoint (the description still carries it), Cancel and Send stay in one row with the counter, and the cell is tall enough for the longest reply at 320 pixels.