[Maps] Overflow of text outside tooltip border in Maps in Kibana 7.10.1

[TinaHeiligers]

Kibana version:
7.20.2

Original install method (e.g. download page, yum, from source, etc.):
originally reported for a Cloud deployment but reproducible running Kibana and ES through Docker (using the apm-integration-testing setup)

Describe the bug:
Fields with long text values overflow the tooltip border.
This is a possible regression of the fix for related tooltip resizing issue fixed by #47645 for v7.5.

Steps to reproduce:

1. Run Kibana v7.10.1 (e.g. using the apm-integration-testing suite with ./scripts/compose.py start 7.10 --no-apm-server,
2. Load the logs sample data set.
3. Add the following fields to the tooltip in the Actual Requests Layer:

• message
• extension
• ip
• geo.coordinates
• referer
• tags
• url

4. Save the map
5. Zoom in to a level where you can see the Actual Requests tooltips (default zoom level is from 9)
6. Hover over point and observe that the values for the agent field, message field, referer and url all overflow the bounds of the tooltip.

Expected behavior:
The tooltip text should wrap and be contained within the tooltip border.

Screenshots (if relevant):

With dev tools open and the FeatureProperties component highlighted:

Errors in browser console (if relevant):
None

Any additional context:
The bug seems to be fixed in master.

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[diegodelrieu]

Hi, facing the same issue here.

For those that are still running broken versions of Kibana is there any way to find the commit that fixed this display bug ?

[nreese]

For those that are still running broken versions of Kibana is there any way to find the commit that fixed this display bug ?

This issue is still open so there is no merged fix yet.

[nreese]

Closed by #132257 in 8.4.0

Screen shot without overflow

#132257 upgraded Kibana to EUI v58.0.0. That fixed the issue by switching from eui-textOverflowWrap to eui-textBreakWord

eui-textOverflowWrap is defined as

.eui-textOverflowWrap {
  @include internetExplorerOnly {
    word-break: break-all !important;
  }
  overflow-wrap: break-word !important;
}

eui-textBreakWord is defined as

@mixin euiTextBreakWord {
  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other
  word-break: break-word; // IE doesn't understand but that's ok
}

https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ defines CSS magic of the fix