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:
Open the site on a mobile device or emulate one via devtools
Add some PDF files
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.
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.
Helpful info
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:
Steps to reproduce Steps to reproduce the behavior:
Expected behavior All elements should remain visible on small width screens, no matter how long filenames are.
Screenshots![localhost_8000_(iPhone 12 Pro)](https://user-images.githubusercontent.com/9030780/168450972-c7d25b5b-f337-4bcb-bb38-458f0b273ad3.png)