[Discover] Add wrapping to field list on sidebar

[andreadelrio]

Summary

This PR removes truncation from fields and makes them wrap instead. Following what's being done on Lens, wrapping happens on the.whenever possible.

Also added a rounded border to each item and adjusted spacing.

Fixes #69814

Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
- [ ] Documentation was added for features that require explanation or tutorials

• Unit or functional tests were updated or added to match the most common scenarios
  - [ ] This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[kertal]

@elasticmachine merge upstream

[kertal]

Code LGTM, this will be a big improvement for users with long fieldnames. My question here is, if it needs more adaption. Compared to Lens there's less available minimum width available, maybe this should be increased? CC: @AlonaNadler

[cchaos]

I feel like a lot of work is going into duplicating the Lens display of fields when, at this point, we should probably just make a re-usable component. They can still have a few differentiating characteristics like the "Add" button but display-wise it is taking just as long to replicate the same styles. I'd say, that this PR is a quick win to get wrapping field names, but the next PR should be to create a component for use in both applications.

[cchaos]

Works as described. Quick win for non-truncated field names. Just a few comments on the SASS

[cchaos]

1px padding?

[andreadelrio]

That is to avoid having the field name too close to the button. This as an example, no padding and 1px padding

[cchaos]

👍 Gotcha. Since the math just ends up being 1px your fine to just say 1px it's anything above that that requires math on our sizing variables

[cchaos]

😃 LGTM!

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 32211c4

Build metrics

✅ unchanged

History

• 💚 Build #61551 succeeded 9420eff
• 💚 Build #61389 succeeded 971d63d
• 💔 Build #60439 failed 6ef78cb

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

[kertal]

Code LGTM, hurray for the quick win 🎉 , tested locally in Chrome, Firefox, Safari, MacOs 10.14.6, works as expected

[andreadelrio]

Discussed with Matthias that we'll take care of the sidebar width in another PR.