Quick summary

From Automattic/themes#6141, styles are inconsistent when a site is on atomic compared to on simple.

For this particular issue I bumped into, it was only reproducible by going through Site Assembler + Atomic.
Directly changing the theme to Creatio 2 and editing the header won't cause this issue.

Feels tricky, so opening an issue to document it and wondering if there's a larger bug happening in the background.

Steps to reproduce

On Atomic site

1. Go to /themes
2. Go to Site Assembler
3. Pick patterns (see videos for what I picked)
4. Go to Full Site Editing
5. Add in the search bar (see videos for exact steps)
6. Browse site post (home page is okay)

On Simple site

Revert to non-atomic in case you don't want to create a new site and go over all the steps.
Or you can start vise-versa with the simple site and convert it to atomic, same steps apply as the video.

What you expected to happen

Search bar should not cause the site styles to break on simple or atomic.

What actually happened

Simple ✅
Atomic: ❌ Styles are different and broke the layout

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

A workaround would be to use CSS style overrides to fix the issue.

.wp-block-search__label {
  width: initial;
}

Style issue happens on Chrome and Safari due to the width:100% on atomic sites.
Firefox renders normally but also loads the width:100% on atomic sites.

Observing the CSS, though, it is inconsistent between atomic and simple.