[EuiDataGrid] Users can lose sight of actions menu

[JasonStoltz]

Describe the bug

Depending on the scroll position within the EuiDataGrid, the cell actions menu can actually appear behind the header and/or footer, potentially causing users to not realize the actions are available.

There are two cases in which this bug can occur:

1. When scrolling, a user can lose sight of the actions menu when it scrolls behind the header cells
On it's own, I don't perceive this as a big issue. I believe most users would simply scroll the actions back into view just like any other content that gets scrolled out of view. However, it's made worse by the next scenario.

3. When a user clicks on a cell and it snaps into focus, the actions menu is not visible
Because it focuses as top-aligned, the user never sees the actions menu and is unaware that it is scrolled out of view.

Impact and severity
Short of any real user data here, I perceive this as likely a low severity issue. My hunch is that most users familiar with using the Data Grid will realize this is happening and work around it. However, it could be a persistent annoyance for users, and is likely worse for users that are new to using the Data Grid.

Environment and versions

• EUI version: v100
• React version:
• Kibana version (if applicable):
• Browser:
• Operating System:

To Reproduce
Steps to reproduce the behavior:

1. Go to https://eui.elastic.co/#/tabular-content/data-grid#virtualization
2. Focus a cell and scroll, or click on a cell that is partially above the current datagrid view box. Reference the example videos above to reproduce concisely.

Expected behavior
At no point should the actions menu be hidden behind content when a cell is focused.

Minimum reproducible sandbox
N/A - It's reproducible directly in the docs.

Screenshots
N/A - Videos included above

Proposal

We considered the easiest solution here to be simply adjusting the z-index of the actions menu. The UX would not be great:

We also considered placing the actions menu below the cell at all times, rather than above, but we'll encounter the same issues with the bottom of the table as we do currently with the top.

We currently think the best solution would be to dynamically show the actions menu below the cell (rather than above) in cases where it scrolls past the top of the data grid view. We would implement this with an intersection observer. The primary concern here would be that is could degrade performance. Our proposal here would be to do a quick spike of this behavior to share with the OP and design teams to consider both performance and UX.

[JasonStoltz]

We discussed this in person.

We think there may be a simpler solution where we simply apply an offset to the scroll/focus behavior to accomodate the actions menu.

If it works technically, we'll need to validate it with design team.

[weronikaolejniczak]

Hey @ryankeairns @ek-so what do you think about this solution?

Screen.Recording.2025-04-25.at.17.01.22.mov

Clicking or focusing a cell scrolls it into view with enough space for the actions menu. You can test this in the staging docs.

The menu can still be hidden behind the header when scrolling, but as noted:

Most users will likely just scroll it back into view like any other content.

This issue doesn’t affect the first row, so no problem there: