Long affiliations should be wrapped in backend (bad UI/UX)

[mpbraendle]

Describe the bug
In the backend, long affiliations of contributors shift the buttons for editing a contributor out of focus of the browser window. UI/UX must be improved to not have to scroll horizontally. CSS should be applied to the .listPanel__itemSubtitle class to wrap the affilation, e.g. such as

.listPanel__itemSubtitle {
white-space: normal !important;
}

In addition, the affiliation field of a contributor is too small (just 20em) and hinders editing within the affiliation. Either make it as wide as the enclosing popup window (minus a small border to the left and right, e.g. width: 100%) or provide input textbox instead of a input text field.

To Reproduce

1. Go to the publication tab of a submission.
2. Edit a contributor, contributor, enter a long affiliation and save.
3. In the list of contributors, all buttons to edit a contributor get out of focus and it must be scrolled horizontally to reach them.
4. Edit the contributor, try to edit the affiliation again by inserting or deleting text at some position within an affilation.

What application are you using?
OJS 3.4.0-5 (but probably also applies to OJS 3.3)

Additional information

---

Development Updates

Changes made:

1. Wrapped the ContributorsPanel's author and affiliation data using CSS rules white-space: normal
2. Made the Affiliations field in full width for both main and 3.4 versions.

Notes:
v3.3 is not affected by this issue as the affiliations column is not shown in the Contributors list, and the Affiliation text field is longer than the normal size of our text fields.

---

Pull Requests:

main

ui-library: pkp/ui-library#420
pkp-lib: #10503

(submodule updates)
ojs: pkp/ojs#4460
omp: pkp/omp#1718
ops: pkp/ops#785

---

stable-3_4_0

ui-library: pkp/ui-library#419
pkp-lib: #10504
ojs; pkp/ojs#4458

(submodule updates)
omp: pkp/omp#1717
ops: pkp/ops#784