Fix too much spacing between Optimize input field and errors

Bug Description

See https://google.github.io/site-kit-wp/storybook/main/?path=/story/optimize-module-setup--start-with-invalid-values: The space between the Optimize ID field and the error text below is way too much. This is likely happening because the error text is placed outside the .googlesitekit-setup-module__inputs wrapper, which shouldn’t be the case as it includes extra margin etc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• In the Optimize setup (and settings as well), any input error text should have the correct space from its associated input field, specifically an error for the Optimize ID shouldn’t have the extra margin that it currently has (compared to e.g. an error for the AMP experiment JSON field).

Implementation Brief

• The extra space is caused by the following CSS Rules in the assets/sass/components/setup/_googlesitekit-setup-module.scss file.
• https://github.com/google/site-kit-wp/blob/8bff83f9f11742dee8aca49b04f0f55121d040e1/assets/sass/components/setup/_googlesitekit-setup-module.scss#L109-L115
• Add new CSS Rules that overrides and sets the bottom margin (ie. margin-bottom: 0) to the div.mdc-text-field--error and the following helper text div.mdc-text-field-helper-line elements inside div.googlesitekit-setup-module__inputs of form.googlesitekit-optimize-setup__form.
  • We can keep the change limited to the Optimize ID input field by targeting the div with [name="optimizeID"] attribute selector.

Test Coverage

• N/A

Visual Regression Changes

• May need updating.

QA Brief

• Check whether spacing has been reduced in the following story: https://google.github.io/site-kit-wp/storybook/main/?path=/story/optimize-module-setup--start-with-invalid-values

Changelog entry

• Fix styles for errors on Optimize setup and settings forms.

[asvinb]

@eugene-manuilov Can you check @wpdarren 's comment about the release. I saw the PR was merged against develop but did not make its way to the main branch even though it’s tagged for the release. Also, updated PR to fix the issue Darren mentioned.

[wpdarren]

QA Update: ✅

Verified:

• The spacing has been reduced in the storybook.
• Also tested this on a site and can confirm the spacing is reduced and the issue reported is fixed
• Confirmed that the mobile styling issues are fixed.

Screenshots