fix: adjust search container width to align with page contents

[vpicone]

closes #1101

Adds some media queries to handle search width at various viewports.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/gatsby-theme-carbon/AdSk6Hoh5tLGBLKrBTMFKzie4E6g
✅ Preview: https://gatsby-theme-c-git-fork-vpicone-search-width-carbon-desi-58211c.vercel.app

[alisonjoseph]

The calculations seem off by a bit on my 13 inch MacBook fullscreen. 🤔

[mjabbink]

Preview looks good in both desktop and mobile

[vpicone]

@jeanservaas made it so we only expand to 100% when the left nav is hidden. Once we get out of tablet range, it maxes out at the original spec/component implementation.

[mjabbink]

Preview looks wrong now? What happened?

[mjabbink]

MOBILE CORRECT

[mjabbink]

TABLET CORRECT

[mjabbink]

DESKTOP — Needs to be to one of the green lines. I believe the space was for the far left one.

[mjabbink]

Also seeing this in the preview for “Workplace Design” — https://ibm-brand.github.io/workplace-xg/

[vpicone]

@mjabbink @aagonzales and @jeanservaas okayed returning to the original search spec on desktop.

Because the shell sits above and separate from the page contents, justifying to that content requires hacky approximations at each viewport with unpleasant edge cases (see @alisonjoseph screenshot)

[vpicone]

Reason why it requires hacks: the page container pushes from the left and the search emerges from the right.

We also need to subtract the switcher menu which gets spicy.

[vpicone]

Also seeing this in the preview for “Workplace Design” — https://ibm-brand.github.io/workplace-xg/

Its a theme issue so they'll get a fix once we ship this and they update.

[alisonjoseph]

LGTM!

[mjabbink]

In the last image the search is spanning too far.

[mjabbink]

Looks good to me too as long as the view deployment button above is what I’m supposed to look at.

[mjabbink]

@vpicone @alisonjoseph This seems to have reverted because it’s the same as before the issue was made.