💖 Display line breaks in text fields from API

[ezwelty]

Sets CSS white-space: pre-line to elements displaying the following attributes:

• Location.description
• Review.comment

This ensures that line breaks (\n) are displayed correctly and as they appear in the form text areas.

@Qrtn @SirajChokshi Is this the best way to achieve this (setting style on elements directly), or can just the style be made into a reusable component? This situation could occur anywhere that a text field (user bio, dataset comments, ...) is displayed outside a textarea input.

[SirajChokshi]

These CSS properties are inherited so we can just move them to the parent (Description and ReviewDescription in this case).

I pushed those changes and also added word-break: break-all; so words that are longer than one line will be forced to break. This way users can't add a review with no spaces and have it overflow onto the entire screen 😄

[ezwelty]

@SirajChokshi I think you meant word-break: break-word. break-all is a visual disaster:

Also I'm actually not so fond of putting these styles on Description and ReviewDescription, since these wrap many different elements, not just the elements for review.comment and location.description where we want to explicitly allow multi-line input. For example, if someone somehow manages to pass in a line break in user.name, I don't want that rendered.