Shrink brand before wrap

[AlistairGempf]

Resolves #NUMBER

Overall change: Shrinks the brand svg before the script link wraps onto a new line (except on IE which an IE bug has prevented from working). Previously, the script link would wrap onto a new line before the brand svg started shrinking. This PR makes the brand svg shrink as much as possible before putting the script link onto a new line.

Code changes:

• Use flex-basis of the svg minimum width
• Use flex-shrink and flex-grow to allow the svg to change width
• Keep the -ms-flex-preferred-size at the max width to prevent this bug

---

• I have assigned myself to this PR and the corresponding issues
• Automated jest tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[AlistairGempf]

Blocked on #2887

[AlistairGempf]

Chromatic is showing
on IE. Not sure why it would do that or how to investigate on IE.

[AlistairGempf]

The problem is that IE11 calculates the flex spacing based on the element's flex-basis size, then adds that much spacing between the elements, even if the element is larger than its flex-basis.

In order to have the shrink happen before the wrap, the flex basis needs to be the min-width. This leads IE11 to add the spacing required for the min-width even when the svg is at max-width, pushing the script link off the edge of the window.

[AlistairGempf]

One possible solution is to use the css -ms-flex-preferred-size: ${maxWidth / 16}rem to override the flex-basis set in the flex property only on IE browsers.

This would prevent the shrinking happening before the wrap, but IE must almost entirely be used on desktop so this loss of functionality will not impact many people and it would display the script link reasonably at all widths.

[hotinglok]

LGTM, tested on storybook and IE on browserstack and the functionality seems to be working fine, nice work!

[sareh]

The update to flex works well on supported browsers.
For -ms-flex-preferred-size, I looked on Browserstack with IE11 and removed this style and did not see any change in behaviour. Am I missing something here?

[AlistairGempf]

This is what I see with -ms-flex-preferred-size turned off on IE11 - the script switch is off the edge of the screen.

[sareh]

Seems like I had an issue with the changes in the browserstack dev tools not applying correctly. When I made changes locally I see the same as your screenshot.
So, I'm happy with the change made!

[sareh]

👍 Great work. I've reviewed in on latest Chrome & Firefox as well as IE11.

[paruchurisilpa]

Looks good to me..

[tochwill]

@paruchurisilpa is this ok to merge then?