[EuiDataGrid] Issues with minimal height when browser zoom lower than 100%

[dej611]

This issue is particularly bad when there's only 1 row to visualize on the data grid as the header takes up the full space. As a user who always keep the zoom level at 80% during regular navigation this can be very annoying.

As an example in the Kibana Vega debug inspector the initial data grid contains only 1 row which is shown as follow with 100% zoom:

If I set the browser zoom at 80% within the same session then I get this (which seems correct to me):

If I refresh and reopen the same inspector page, then I get this instead:

The general behaviour with 80% zoom set I see is a N-1 rows in the table which is not super bad, but with the 1 row this is really a bad issue. Perhaps a minimal height can be provided in this case? Or maybe take into account the devicePixelRatio when computing the grid height?

Kibana linked issue: https://github.com/elastic/kibana/issues/148877

[cee-chen]

Hey @dej611! I can confirm/repro this issue - I actually normally browse on Firefox with a larger devPixelsPerPx than the default and have def run into this in the past in EUI's datagrid docs.

As a heads up, EuiDataGrid is currently lower on our priorities and roadmap, so I just wanted to let you know that we have no ETA for a fix and are unlikely to pick up this issue in the near future, but we'd absolutely welcome a PR for it. I think your point on using devicePixelRatio is right on the money.

[tkajtoch]

Adding needs validation label back as we need to look into this issue again and understand if it's still happening

[JasonStoltz]

I pushed this back to "Triage" status in our project board. During someone's support week, let's see if we take a closer look and see what's happening.

[acstll]

I haven't been able to reproduce this. I tried with

• latest Chrome (Version 136.0.7103.93 (Official Build) (arm64)) on macOS 15,
• Kibana v9.0.1, and
• with both x1 and x2 pixel ratio monitors

In all cases the data grid displayed correctly following the reproduction steps above:

1. go the to Vega inspector at 100% zoom
2. set zoom to 80%
3. refresh the session and go to Vega inspector again

Screenshots

x2 monitor, zoom 100% → 80%

x1 monitor, zoom 100% → 80%

I also tried other different zoom settings systematically, without success.

Additionally I tried Storybook with 1 row of data and rowHeightsOptions.defaultHeight set to lineCount: 1 as in the Vega inspector.

@dej611 would you be so kind to try again, to reproduce the issue? or maybe provide any other hints regarding context/environment that would help me reproduce it? thanks a lot in advance 🙏

[dej611]

@acstll just tested on Kibana main and cannot reproduce it any more. Can close this issue (and I will close the Kibana associated one too)

[acstll]

Thank you @dej611 for testing once more!