EuiTabs can break layouts

[gjones]

Summary
When you have a number of EuiTabs, they do not honour the width of their parent and instead force their own width. This can lead to weird behaviour on smaller screens.

Here's an example of the Elastic Cloud layout being forced to horizontal scroll.

and here's how it affects the EUI docs themselves.

---

Here's a related issue filed in Elastic Cloud https://github.com/elastic/cloud/issues/46807

[snide]

Can you give us an example on how to replicate?

When given a parent of 300px, I'm seeing the overflow?

[snide]

Ah. I see the issue now.

[snide]

This is not a problem with the tabs themselves, but the container. Essentially, because of the flex, you'll need to make sure you have a max-width:100% on the parent containers to let the flex in tabs know it can't exceed a certain size (in this case, the full page).

You can fix this on the docs by applying the following

@cchaos can you see any downside to applying max-width: 100% to euiPageBody? If not, I think we could likely safely solve this problem for common occurances (not all!) of this class of problems. @gjones since every page layout is different, you might find you need to apply a similar styling property to any parent containers cloud uses.

[elizabetdev]

@snide the same issue happens on this page: https://elastic.github.io/eui/#/display/code. I think it was introduced with the whiteSpace="pre".

Applying max-width: 100% to euiPageBody as you suggested fix this issue too.

[bevacqua]

@snide's fix seems beautiful

[gjones]

Looks good Dave, thanks! So is this something you (eui team) would apply to the euiPageBody itself? Or is it something we should add at the cloud level?

Meaning, should we (cloud) fix it, or wait for an eui level fix, then upgrade?

[bevacqua]

I don't see a reason not to add this to EUI itself

[snide]

I'll make a PR for @cchaos to review.