"Clickjacking" on mouse hover over Discover table cell (not legacy table)

[ypid-geberit]

Kibana version:
7.12.1. (7.12.0 is also affected).

Elasticsearch version:
7.12.1

Server OS version:
SLES

Browser version:
Firefox

Browser OS version:
88.0

Original install method (e.g. download page, yum, from source, etc.):
https://github.com/deviantony/docker-elk.git

Describe the bug:
On mouse hover over a fields value, the buttons filter in/out and so on move in from the right side. On fields with smaller columns space, it those buttons move under the mouse. If the users intention was to select a value to copy it and it will trigger an unintended action instead.

Steps to reproduce:

1. Disable doc_table:legacy to use the "not legacy" table.
2. Go to Discover.
3. Make column space so small that a table cell is completely filled by the value.
4. Hover over the cell with the intention to select the text.
5. Left mouse click.

Expected behavior:
Text gets selected.

Screenshots (if relevant):

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:
This behavior is basically Clickjacking. To solve it, maybe put the buttons below the cell so that the user can not click on them accidentally.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[timroes]

cc @chandlerprall Since this is something internal to how Data Grid works, I wanted to raise awareness for you, since I don't think there's anything we can do against that on the Kibana side?

[elasticmachine]

Pinging @elastic/eui-design (EUI)

[cee-chen]

I think this is similar/related to elastic/eui#5828. Essentially, it sounds like data grid needs to check when the cell is too small for the cell actions to display without blocking the majority of the content, and figure out some other way of displaying the cell actions.

[JasonStoltz]

@cee-chen Does elastic/eui#7343 close this?

[cee-chen]

Yes!