No linebreak in DetailsPanel

[ridoo]

Describe the bug

On Firefox, long lines of attributes within the Detailspanel do not break. Detailspanel shows an horizontal scrollbar instead. This is different from Chrome.

Firefox:

Chrome is ok:

Expected Behavior

Lines break the same way as in Chrome Browser

Steps to Reproduce the Problem

1. Open a dataset having attributes with long lines (browser resize does not resize the detail panel)
   - master: https://stable.demo.geonode.org/catalogue/#/dataset/10913
   - development: https://development.demo.geonode.org/catalogue/#/dataset/583
2. Open details panel (firefox)
3. Open details panel (chrome)

Specifications

• GeoNode client version: master and development
• Browser: Firefox
• Installation type (vanilla, geonode-project): demo instances
• Additional details:

[ridoo]

@kilichenko-pixida could you please have a look into it

[kilichenko-pixida]

@ridoo It seems like the poblem is not with long lines of attributes per se, but specifically with keywords, because they are links. If the title is very long, it seems to wrap around just fine in Firefox as well. And as for the keywords, adding the following css makes it work both in Chrome and Firefox:

.gn-details-info-value > a { display: inline-block; }

My guess is that this particular element styling isn't specified explicitly and Chrome and Firefox just have different default display modes. Unfortunately, I wasn't able to figure out how to actually make changes to front-end and would require some help to actually apply the change.

[kilichenko-pixida]

Created a PR for it.