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

[acstll]

Describe the bug

When there are at least 2 primary actions and 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.

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

[JasonStoltz]

Just a note: we recommended a workaround for this, we should circle back and clean it up when it's been completed.

around line 743 in the EuiInMemoryTable you can try and add the min height you suggested in your original message, like this: import { useEuiMaxBreakpoint } from '@elastic/eui';

rowProps={(item) => ({ 'data-test-subj': mlModelsTableRow row-${item.model_id}, css: css${useEuiMaxBreakpoint('l')} { min-block-size: 10.875rem; }, })}

[weronikaolejniczak]

It seems that the arrow cell is positioned absolutely:

which puts it outside of the regular flow and the row won't consider it for its height. Relative positioning puts it after the content:

Visually, the expand chevron needs to appear in the bottom-right of the row but likely for accessibility, it must appear before the actions in the DOM.

I would say it's High priority because it's user-facing and makes the collapsed action menu inaccessible. It's hard for me to estimate the effort because I don't know the acceptable solution.

[JasonStoltz]

Impact: Broken, there is a workaround, but it's still going to cost development time when teams run into this in a dev cycle.

Not a lot of unknowns. However, whenever we do this, we should consider DoD revisiting any workarounds that have been applied to Kibana. We are pointing this as a 3.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.