files: add word break for long filenames

[0einstein0]

:heart: Thank you for your contribution!

Description

Closes https://github.com/zenodo/ops/issues/382 Closes https://github.com/zenodo/rdm-project/issues/626

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• [ ] I'm aware of the code of conduct.
• [ ] I've created logical separate commits and followed the commit message format.
• [ ] I've added relevant test cases.
• [ ] I've added relevant documentation.
• [ ] I've marked translation strings (for relevant code).
• [ ] I've followed the CSS/JS and React guidelines (for relevant code).
• [ ] I've followed the web accessibility guidelines (for relevant code).
• [ ] I've followed the user interface guidelines (for relevant code).
• [ ] I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• [ ] I've NOT included third-party code (copy/pasted source code or new dependencies).

Third-party code

If you've added third-party code (copy/pasted or new dependencies), please reach out to an architect.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.

[ptamarit]

Tested and it works fine (the layout is not broken anymore, the delete icon is visible, etc.).

Small remarks:

• Wondering if there's a more elegant solution than the hardcoded maximum width of 500px (it looks like wasted whitespace on wide screens).
• Wondering where the CSS should go if not inlined.