Better align eyebrow and global search

[niqjohnson]

When the global search appears alone in the header (i.e. on the /complaint/ page, where we hide the "Submit a Complaint" global header CTA), it's offset just slightly from the right edge of the container and the phone number in the eyebrow above. This offset has always existed, but it's more noticeable now that the phone number is the only right-aligned element in the eyebrow. This change aligns the right edge of the search button with the right edge of the page when there is no header CTA.

---

Changes

• Align the right edge of the search button with the right edge of the page

How to test this PR

1. Visit /complaint/ and make sure the right edge of the search button is aligned with the right edge of the container/phone number
2. Click on the search button and make sure the right edge of the search input is also aligned in the same spot
3. Visit any other page and make sure the search button + CTA alignment hasn't changed
4. Resize the viewport to make sure the alignment hasn't changed at tablet and below
5. Make sure the search link is positioned OK in the no-js version of both the /complaint/ page and any other page that has the CTA

Notes and todos

• From what I understand of atomic design, the global search + CTA styling should come from the container organism rather than being built into the global search molecule, so that's where I moved things to. Happy to rework the CSS if that's not the right place.

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines

[anselmbradford]

Hmm, this gets a little tricky. First, this is breaking the encapsulation of .m-global-search by reaching into .m-global-search__content from the parent. We'll likely want a BEM modifier for this. Second, the existing positioning accommodates the focus rectangle, whereas setting right to zero clips the rectangle:

This CSS overall is probably due for some layout scrutiny since it's pretty old. We could probably tighten it up with CSS grid, for instance. Do you want to noodle on it, or do you want my help?

[niqjohnson]

@anselmbradford, do you want to take a pass at this? It's not a big priority, so no huge rush on this. Agreed that the CSS is due for a rewrite.

[anselmbradford]

On the current site, the "search" and "submit a complaint" link have a | divider, and the right-hand padding of the | appears in the global cta, and the left-hand padding appears in the global search. In f1c1fc3 I moved the left-hand gap of the | to the global cta, and moved the search so it has a flush right-hand side.

In the future, we'll want to rewrite the whole header (likely with CSS grid) to remove much of the nesting and margin and positional tweaks.

[niqjohnson]

@anselmbradford, nice, the fix in f1c1fc3 is much cleaner than what I was trying to do. Everything looks good locally. I can't approve since this is my own PR, so this comment will be my official 👍. If you want to approve, I'll merge it in.