[search] extend search field in mobile to allow users to enter a term

[jeanservaas]

1. Right now in mobile, it's not possible for users to trigger the typewriter to enter a search term on their phones because the field does not extend wide enough.

2. Mike wanted to try to get the search width onto the grid at the desktop and tablet breakpoints as well.

1. Expand Mobile search

Current

Please span the search to the left side of the hamburger menu (see below) to make it as easy as possible for users to interact with it.

Expected

2. Modify search width to align with grid at all breakpoints.

Align edge of open Search field with the edge of the first tab on the banner at all breakpoints.

Expected

1312 breakpoint example (do same alignment through tablet)

[alisonjoseph]

moving this to the theme repo, since this needs to be handled at the theme level vs. just for the Carbon website

[jnm2377]

@jeanservaas should we re-open this if the search isn't aligning to page tabs or is the full width intentional?

[jeanservaas]

Great call @jnm2377 ! Thanks for catching this. I just reopened the issue and I wonder if I missed this while reviewing it or something.

The expected behavior in desktop is this:

Not this:

[mjabbink]

Can we get this done please.

[mjabbink]

@jeanservaas I was checking on the preview link for the Workplace site and played with the extended search and the issue we need to take into account is the results that span across the entire width. I think we need to spec right side margin to prevent this.

[mjabbink]

@jeanservaas Did you connect with @alisonjoseph on this for specs on width of search result text?

[vpicone]

Following up with what @mjabbink mentioned, @jeanservaas the shell sits on top of the grid. Is it tied to that specific anchor point at every viewport width?

And just to make sure, on mobile it expands to hit the nav launch button?