[EuiDataGrid] Cell text content visible below truncation when using `fontSize: "s"`
davismcphee opened this issue · 5 comments
When using fontSize: "s" in the EUI data grid gridStyle prop, extra text content is visible below where the truncation occurs.
Discover:
EUI examples:
MRE: https://codesandbox.io/p/sandbox/fervent-khayyam-lfppgv?file=%2Fdemo.js
From a quick search, it looks like this may be related to the -webkit-line-clamp CSS property plus the cell content element's padding resulting in more content being visible than expected: https://stackoverflow.com/questions/70211893/why-is-line-clamp-not-working-with-padding.
Hey @mgadewoll and @cee-chen, thanks for addressing this so quickly! Unfortunately we're now experiencing a different display issue in Discover, which I think started after this fix, where the cell content is being partially cut off when using the lineCount setting:
I haven't looked into it much yet, but just wondering if either of you have an idea of what's going on or if there's a way to address it on our end? I noticed it doesn't happen when I set the row height to "Single", but it does when I set it to "Custom" and adjust the lines per row to 1.
@davismcphee This is because EuiDescriptionList sets a different line-height CSS than what EuiDataGrid sets on its cell content, and EuiDataGrid is calculating cell height based on the line-height it thinks the content has. You need to update your custom CSS of the description list/title to inherit the cell's line height.
I've opened a PR with the fixed CSS here: elastic/kibana#186570
Also, just to clarify, the reason why this wasn't an issue prior to this PR fix was because we weren't aggressively clipping/hiding overflowing content for line-clamp CSS where we now are to fix the above bug.
@cee-chen Thanks for looking into this and opening a fix! Tbh regardless of this issue it feels like inheriting the line height for our use of EuiDescriptionList is a good idea so things line up better.
Unfortunately that was only one example of where this is an issue in Kibana, and in some cases we are intentionally displaying content that overflows, like the log level badges in Logs Explorer:
I'm not really sure of all the areas in Kibana that do things like this, but it seems like it could become an issue elsewhere too.
In general it shouldn't be an issue for any line height above 1 since most content that intentionally overflows is by a small amount, like the log level badges, so it can still be viewed in a single line. Where this isn't an issue for "Single" mode, but is for "Custom" with a line height of 1, would it make sense to just use the "Single" mode display when line height = 1, and only clip overflowing content when line height > 1? Just trying to think of a potential solution that fixes the overflow issue for line height 1 while still benefitting from this bug fix for the original issue.
would it make sense to just use the "Single" mode display when line height = 1,
Yep, we could certainly make that change and it should hopefully be relatively minimal in terms of lift/impact!
@cee-chen That would be great and should solve any of the remaining issues, thanks!