fix: Filter names overflow wrap

[michael-s-molina]

SUMMARY

Fixes a problem with the overflow wrap of filter names.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2023-08-25.at.15.09.39.mov

Screen.Recording.2023-08-25.at.15.01.26.mov

TESTING INSTRUCTIONS

Check the videos for instructions.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[kgabryje]

Judging by this CSS wrapping the filter name:

export const FilterName = styled.span`
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

I think the intention was to only display 1 line of filter's name and truncate the rest. Maybe we should fix the bug by ensuring that filter name respects its parent's width instead of removing truncation?

[michael-s-molina]

I think the intention was to only display 1 line of filter's name and truncate the rest. Maybe we should fix the bug by ensuring that filter name respects its parent's width instead of removing truncation?

The problem is that the FilterCard is already a tooltip and if we truncate the metric name we can't identify the metric.

[kgabryje]

The problem is that the FilterCard is already a tooltip and if we truncate the metric name we can't identify the metric.

I think this was the behaviour before the regression with overflowing title:

(added max-width: 100% to parent component to trigger the overflow). Could you elaborate why that won't work?

[michael-s-molina]

I thought we were avoiding tooltip on top of tooltip but it seems that's not the case given that Depend On will also show a tooltip. I'll add max-width: 100% to keep the previous behavior.

[kgabryje]

I thought we were avoiding tooltip on top of tooltip but it seems that's not the case given that Depend On will also show a tooltip. I'll add max-width: 100% to keep the previous behavior.

I think we treat FilterCard more like a popover and given it has very different styling than a tooltip it's ok for us to use both here

[michael-s-molina]

@kgabryje I roll back FilterCard to its previous behavior with the addition of overflow:hidden. max-width does not respect FilterCard's padding. Now it looks like:

[kgabryje]

Is this change still required?

[michael-s-molina]

Yes, this correctly breaks the filter names in the native filters panel. The names are not truncated in that panel.

[kgabryje]

@kgabryje I roll back FilterCard to its previous behavior with the addition of overflow:hidden. max-width does not respect FilterCard's padding. Now it looks like:

Great thank you! It seems unrelated to your fix, but the behaviour of displaying the tooltip seems flaky - when I open a filter card for the first time, the truncated title shows tooltip on hover, but when I close the filter card and open it again the tooltip doesn't appear anymore. Let's keep that in mind to fix it soon