[Maps] fix Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed

[nreese]

Fixes #136428

To test

• Download world countries geojson from https://vector.maps.elastic.co/files/world_countries_v7.geo.json?elastic_tile_service_tos=agree&my_app_name=ems-landing-page&my_app_version=8.3.0&license=643c1faf-80fc-4ab0-9323-4d9bd11f4bbc
• Create new map
• Click "Add layer"
• Select "Upload file" and upload world countries geojson. Add layer to map.
• Add "geometry" to Tooltip fields.
• Mouse over country with complex geometry and verify tooltip does not overflow screen height.

[elasticmachine]

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

[elizabetdev]

@nreese what do you think of adding a min-width to the property labels?

.mapFeatureTooltip__propertyLabel {
  min-width: $euiSizeXL * 2.5;
  max-width: $euiSizeXL * 4;
  font-weight: $euiFontWeightSemiBold;
}

The .eui-textBreakWord that is passed to all table td causes the words to break but for this particular scenario, when the word breaks it doesn't leave enough space for the .mapFeatureTooltip__propertyLabel:

By ensuring there's always a min-width for .mapFeatureTooltip__propertyLabel when the words break it takes into account the min-width: $euiSizeXL * 2.5:

[nreese]

what do you think of adding a min-width to the property labels?

That looks much better. Thanks for the suggestion.

[nickpeihl]

lgtm!

code review and tested in chrome and firefox

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5f45c00

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
maps	2.6MB	2.6MB	+188.0B

History

• 💛 Build #63019 was flaky 01a9b14

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[elizabetdev]

LGTM! 🎉

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.4

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation and see the Github Action logs for details