When diagnosing elastic/kibana#121403 with @gavinwye we saw lots of EuiFlexGroup components in Security were set to direction="column". Along with the default responsive={true} this can cause items to grow inside containers in weird ways because of the flex-basis moving to 100% for children.
I can't think of an instance where we'd want to apply the flex-basis on the column layout to 100% in mobile. Likely the easiest solution is to make the CSS for the responsive selector to more specific so it doesn't do anything when in a column layout. Another option would be to make responsive={false} in the component itself whenever direction="column". I think I prefer handling this at the CSS level.
https://github.com/elastic/eui/blob/main/src/components/flex/_flex_item.scss#L31-L41
When diagnosing elastic/kibana#121403 with @gavinwye we saw lots of
EuiFlexGroupcomponents in Security were set todirection="column". Along with the defaultresponsive={true}this can cause items to grow inside containers in weird ways because of the flex-basis moving to 100% for children.I can't think of an instance where we'd want to apply the flex-basis on the column layout to 100% in mobile. Likely the easiest solution is to make the CSS for the responsive selector to more specific so it doesn't do anything when in a column layout. Another option would be to make
responsive={false}in the component itself wheneverdirection="column". I think I prefer handling this at the CSS level.https://github.com/elastic/eui/blob/main/src/components/flex/_flex_item.scss#L31-L41