Error message box width too small

Question

I think the below error message box could have its width increased. Not sure if other errors suffer from the new compact CSS.

Answer 1

That error message is pretty cramped, but a lot of it is because of the padding to the right (50 pixels for a box nearly 130 pixels wide).

                                                           

In addition to making the message wider, it would be nice if the padding to the right was made uniform with the padding on the left, eg:

                                                  

The example above is just the standard error message, with these differences:

• padding on right matches padding on left (15px),
• increased width
• close button has slight margin to left and bottom

Answer 2

Suggested Fix

The following div contains the error message markup.

<div class="error-popup error-popup-alert error-popup-dismissable" 
     style="position: absolute; display: block;">

Based on my tests, when using a percentage for the width, the div inherits the width from the <table> containing the comments. Therefore, setting a width of 50% works well. The error message will always be half the width of the table containing the comments.

I set the width to 50% using Chrome. It's not immediately clear which class would need to be set: error-popup, error-popup-alert, or error-popup-dismissable.

Also, the inner div containing the actual error message contains an inline style padding that might not be need. It's tough to say since I'm not sure where else this styling may be used.

<div class="error-message" style="padding-right: 50px;">