[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; },
})}