MGNLUI-2749 asks for a more set-back, subtle visual appearance of form help, warnings and error messages. Our current message look to blocky and too alarming.

Please change the visual appearance of help, warning and error messages so that it corresponds more to the original design:

• The message box has the same width as the value part of a field they're pointing to. In general, it should cover the right part of a form, which is form width minus left/right padding minus label width.
  • Left edge is where all input fields start.
  • Right edge is where the area for input fields ends: 42 px from right border.

• Change the padding of that box so that it appears to be less high:
  • Use 6px above and below.
  • Increase left and right padding to 12px.

• Move the arrow of the message box closer to the field it points to. The div also has a 5px top padding: remove that.
  • The arrow should be at 100px from left edge of message box for smaller, half-width input fields.
  • The arrow should be horizontally centered for large, full-width input fields.