Chrome component overflowing issue

[luis-almeida]

Expectations

Chrome component should not let its child components overflow the viewport.

Reality

Chrome header items with long content cause the root container to overstretch and scrollbars to appear:

We have had a local fix in place for this issue for some time now just by setting max-width: calc(100vw - 60px); on the Body. This solution does not make take into account the standalone option though. I'd like your feedback before going any further.

Steps to Reproduce

1. Add a HeaderItemText with a long text or simply several of them
2. Chrome container expands beyond 100vw.

Fine Print

• Component: Chrome

[jzempel]

Thanks for this @luis-almeida! I'll take a closer look.

[jzempel]

It looks like adding a min-width: 0 to the Body component alleviates problem of end-aligned header content scrolling off the screen. I'm assuming you are able to apply an Ellipsis component within the <HeaderItem maxX> in order to prevent that element from overflowing. Does that look right to you?

If not, please provide a codesandbox with the problem so we can kick it around a bit more. Thanks!

[luis-almeida]

@jzempel thanks for taking over this issue and get the fix merged in css-components.
Can I close this issue now or should we wait for a react-components/chrome release containing the fix?

[jzempel]

I was waiting to close until a release got cut that includes #416. /cc @Austin94

[austingreendev]

This was deployed with a group of other changes under https://github.com/zendeskgarden/react-components/releases/tag/v6.4.4

These should be on the NPM registry within the next 30 minutes. Thanks for the help with this one!