Full width blue background on GA4 notices

Feature Description

Some Figma screens have the blue bar full width, others have the blue bar at the end of the dropdown, which is correct?

Related Asana task

---

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

Acceptance criteria

• The “Learn more” link in the blue notice in the Analytics setup flow (UA, GA4, and GA4-transitional only) should always be aligned to the very right of the notice, even if the screen is very wide.
• Instead, the blue notice in that flow should have its maximum width limited in a way that prevents the “Learn more” link from appearing too far away / too decoupled from the notice main content. (There is no exact number given, please include @Pratheep-lab in the PR review for this.)

Implementation Brief

Using _googlesitekit-settings-notice.scss update .googlesitekit-settings-notice adding a max-width of 1098px.

Test Coverage

• n/a

Visual Regression Changes

• Check visual tests

QA Brief

• Using storybook and / or the analytics set up flow, verify that the maximum width of the GA4 notice is 1098px

Changelog entry

• Improve Google Analytics 4 notices.

[wpdarren]

QA Update: ✅

• Verified that the maximum width of the GA4 notice is 1098px on large screen sizes
• Also checked the notices on smaller screens to make sure no styling issues exist.

Screenshot 1 - Screenshot 2 - Screenshot 3

[johnPhillips]

@wpdarren Good catch, thanks. This appears to be a pre-existing issue as when I revert the change the issue is still visible. It might be to do with the dropdown overflowing the container, because the content wraps perfectly when I remove the dropdown from the markup:

I’m very happy to investigate further but am conscious this was estimated as a 3pt 1-liner to address a different problem. @aaemnnosttv Should I investigate under this issue or is it out of scope?