Min-length validation hint for comments is overlapping with the buttons below the comment field

Description

Steps to reproduce

  1. Have some unread comments in your inbox

  2. Go to the "Unread Messages" section on the homepage

  3. Click the "Reply" button on any of the messages

  4. Click into the textarea of the popup that shows up, then click outside of the popup without entering text

What happens
The "Brevity is the soul of wit" failed min-length validation message shows up, but the "Comment" and "Close" button are positioned on top of it. See first screenshot.

What should happen
The failed validation message and the buttons should not be overlapping. See the second screenshot on how the hint should be behaving. That solution was done by giving the hint a margin-right similar to the space the buttons take up (~15em).

Note
The same code is used in the inbox, but the overlap isn't happening because the container is wider. Make sure that the solution for the homepage doesn't break the layout in the inbox.

Environment

None

Status

Assignee

Luis Pabon

Reporter

bing

Roadmap

Comments

Priority

Lowest

Affects versions

Fix versions

None

Components

FrontEnd

Difficulty

Easy

Required Access Level

None

Milestone

Internal 0.9
Configure