[EuiBasicTable] Actions and expanding row icon buttons can overlap on mobile
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Describe the bug**
When there are at least 2 primary actions and [expanding rows](https://eui.elastic.co/docs/components/tabular-content/tables/basic/#expanding-rows) on a `EuiBasicTable`, the icon buttons for these can overlap in the responsive/mobile breakpoints.
**Impact and severity**
There is end-user impact. The `All actions` button will be unreachable.
A possible workaround is to add a minimum height to the rows (via `rowProps` prop), in order to provide space for all icon buttons. But I believe this should be handled by the library.
```ts
rowProps={(item) => ({
css: css`
${useEuiMaxBreakpoint('l')} {
min-block-size: 10.875rem; /* magic number */
}
`,
})}
```
**Environment and versions**
- EUI version: 98.2.1
- React version: ~
- Kibana version (if applicable): ~
- Browser: ~
- Operating System: ~
**To Reproduce**
You need a `EuiBasicTable` that has:
- More than 2 actions with 2 marked a primary (`isPrimary`)
- Expanding rows
And make sure you're viewing the responsive/mobile view.
**Expected behavior**
There should be no overlapping.
**Minimum reproducible sandbox**
https://codesandbox.io/p/sandbox/naughty-turing-p23zn4
**Screenshots**

Contributor guide
Assessment
This issue has not been assessed yet.