Fix layout of file list on mobile

[jerboa88]

Helpful info

• Browser & version: Irrelevant

Describe the bug Mobile device screens are not always big enough to display the add/remove buttons and files in the file list. On small screen widths, we should:

• [x] Reduce unnecessary padding
• [ ] Reduce text size. This should probably be reduced in general as the font size for the file list is larger than equivalent text in the header and footer components
• [x] Implement wrapping for flexboxes
• [x] Truncate long filenames to prevent overflow or line wrapping
• [ ] Allow file removal by swiping on cards?

Steps to reproduce Steps to reproduce the behavior:

1. Open the site on a mobile device or emulate one via devtools
2. Add some PDF files
3. Notice that cards extend beyond the parent container horizontally and that add/remove buttons are cut off or not visible at all

Expected behavior All elements should remain visible on small width screens, no matter how long filenames are.

Screenshots

[jerboa88]

Fixed in 8ba17137d1034103db25120d92c1d74df3207241. Font size changes and card swiping can be completed in a separate ticket if required, but these changes don't seem necessary atm.