Add another messes with govuk error message

[Nosfistis]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem
  • Followed all applicable steps in the debugging guide
  • Checked the FAQs on the message board for common solutions
  • Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
  • Checked that there is not already a package that provides the described functionality

Description

[Description of the issue]

Steps to Reproduce

1. Apply the govuk-form-group--error class in the containing form-group if the first input element of the example (https://moj-design-system.herokuapp.com/components/add-another/examples/default)

Expected behaviour: [What you expect to happen]
The error should be contained within the confines of the form group.

Actual behaviour: [What happens]
The left red border is expanded to cover the legend as well, while also covering it.

Reproduces how often: [What percentage of the time does it reproduce?]
100%

Versions

0.2.2

Additional Information

This is caused because the .moj-add-another__title floats the legend. A clear: both or clear:left on the first govuk-form-group item would be enough to clear the floating legend:

.moj-add-another__item > .govuk-form-group:first-of-type {
  clear: both
}

[gregtyler]

Thanks for reporting Mike! If you're happy and have the time to, please feel free to open a PR to fix this. Otherwise I can pick it up when I have some time.

Might consider this CSS selector to better target the problematic elements (to try and prevent stepping on the toes of other HTML).

.moj-add-another__title + .govuk-form-group {
    clear: left;
}

[Nosfistis]

Even better! I will open a PR then.

[gregtyler]

Thanks! Drop a message here if you've any issues :)