Pattern field validation with a long error message is hidden behind field label

[MitchellCash]

Describe the bug
When you create a pattern validation for a field and include a long error message, it flows to the width of the input field and gets hidden behind the input field label.

To Reproduce
Steps to reproduce the behavior:

1. Create a field with pattern validation and a long error message (see my CMS configuration below)
2. Go to CMS and the field with the pattern validation
3. Enter a message in the field that fails validation
4. Note that the error message can get hidden behind the field label

Expected behavior
The message does not get hidden and remains readable.

Screenshots

Applicable Versions:

• Netlify CMS version: 2.0.9
• Git provider: GitHub
• OS: macOS 10.13.6
• Browser version: Firefox 61.0.2 (64-bit)

CMS configuration

- label: "Site Settings"
  name: "site_settings"
  file: "_data/site.yml"
  fields:
    - label: Site Description
      name: description
      widget: string
      pattern: ['^.{50,300}$', "For best results in Google, we recommend 50-300 characters."]
    - {label: Google Analytics Tracking ID, name: google_tracking_id, widget: string}

[mittalyashu]

I have done some work on the fields.

NOTE: I am still not sure about the colors, but we can discuss about it.

How about this design?

Check the above link for the source.

[mittalyashu]

@erquhart Any comments?

[mittalyashu]

@tech4him1 I don't see anything like this in docs where we can set custom error message.

[tech4him1]

@mittalyashu See the example code in the initial issue description:

pattern: ['^.{50,300}$', "For best results in Google, we recommend 50-300 characters."]

The phrase "For best results in Google, we recommend 50-300 characters." is used as the error message.

[mittalyashu]

That's I get it, what I am trying to say, is it in the NetlifyCMS docs?

If it is not, then we can add it in the docs.

[tech4him1]

Yes, just use the docs search: https://www.netlifycms.org/docs/widgets/#common-widget-options

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.