elastic / elastic/eui

[EuiBasicTable] Actions and expanding row icon buttons can overlap on mobile

Open
#8,259 5 comments 0 reactions 0 assignees View on GitHub
stale-issue
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**
![Image](https://github.com/user-attachments/assets/3680e9f4-8f94-4185-b635-1935fa7fac8b)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.