[EuiDataGrid] Avoid changing column header height on hover

[flash1293]

Problem Statement

It's possible to have variable-height column headers for the data grid which is handy for long field names. However, the context menu is only shown on hover and changes the space available for the app-controlled content, which causes a weird effect changing the height and text moving around when transitioning in the icon button, like here in Discover:

https://github.com/elastic/kibana/pull/238691

Proposed Solution

In the case of right-aligned single-row column headers, the current behavior is great because the content isn't shadowed on hover:

I think it would be great to either

• make it configurable via prop whether the context menu icon button is shown on top of the app-controlled header cell so it's overlaying it
• make it configurable via prop whether the context menu icon is always visible and not only shown on hover

This way, for cases where lots of content in the header cells is expected we can avoid the transition height change effect without changing the default behavior.

Happy for other solutions that avoid the height-changing effect.

Use Case

This is requested in the context of the Streams processing and routing UI preview table. By default, this table shows all columns which means it's very common for space in the header row to be tight.

Value / Impact

Since long field names are common, it's very common for them to get truncated. The height-changing transition effect on hover is easy to trigger accidentally when moving the mouse, confusing the user and looking a bit unprofessional in general.

Urgency

This is not a blocker, but also not a simple nice-to-have, I think "Medium" fits.

Do alternatives or workarounds exist?

Not aware, but happy to learn I'm wrong.

FYI @patpascal