Prevent property names from wrapping in HoverCardDataset

[matthew-white]

This PR addresses the issue described at getodk/central#670 (comment). It prevents property names from wrapping in the hover card for an entity list.

What has been done to verify that this works as intended?

On the QA server, you can see that some entity lists seem to show extra padding at the bottom of the hover card, while others don't. I looked to see what was causing it, and I noticed that the entity list had a property whose name contained a hyphen. A hyphen has the potential to cause the text to wrap. When I removed the hyphen from the text, the extra padding disappeared.

I was able to reproduce the issue locally by creating a property with a hyphen in its name. But with the change in this PR, the issue was no longer visible.

Why is this the best possible solution? Were any other approaches considered?

I tried to set flex-basis: max-content; flex-grow: 1; so that the <div> that's wrapping would just grow instead. That didn't work.

I think text-wrap: nowrap would also work, but it's a fairly new CSS property.

Before submitting this PR, please make sure you have:

• run npm run test and npm run lint and confirmed all checks still pass OR confirm CircleCI build passes
• verified that any code or assets from external sources are properly credited in comments or that everything is internally sourced