[EuiDataGrid] Sort fields panel shows long names centralised on Safari

[machadoum]

Describe the bug When displayAsText is long and the panel has a scroll bar (only on Safari), the field name is horizontally centralised.

Impact and severity Very Low

Environment and versions

• EUI version: 93.2.0
• React version: 18.2.0
• Kibana version (if applicable): 8.13
• Browser: Safari 17.3.1
• Operating System: macOS 14.3.1

To Reproduce Steps to reproduce the behavior:

1. Go to https://zndqlz.csb.app
2. Click on 'Sort fields'
3. Click on 'Pick fields to sort by'
4. See error

Expected behavior The field name should be displayed in a single line, like on Chrome.

Minimum reproducible sandbox https://codesandbox.io/p/sandbox/restless-browser-zndqlz

Screenshots

Safari

Chrome

Additional context This bug was found during Kibana QA testing: https://github.com/elastic/kibana/issues/177873

[cee-chen]

This is a strange CSS bug caused by the browser scrollbar that can't be easily fixed without downsides. I spiked it out in #7567 but ended mildly disliking the visual tradeoff it caused in popovers that did not have scrollbars.

IMO, we should opt for redesigning this popover wholly (see Caroline's UI suggestion in https://github.com/elastic/eui/issues/5894#issuecomment-1124031122) and resolving it that way.

If we don't end up implementing the new design, we could resurrect my PR in a pinch if absolutely needed, but since this is low priority/severity, I'm not sure we need to.

[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.