In shared file module, file name should truncate when it reaches the width of the column.

[DerekCaelin]

Description

When share a file with a long name, eg, 400358235_10225919693641079_6899336601157390679_n.jpg(53 chars) the file name should truncate rather than extend into the neighboring column.

Steps To Reproduce

1. Go to a landscape or group
2. upload a file
3. name file something long: 400358235_10225919693641079_6899336601157390679_n.jpg
4. see issue

Expected behavior

• NO overlap between the file name and the the size.
• File name/title visible whenever possible (text wrapped, e.g. A in the screenshot)
• Truncate the long file name (by column width) and add the ellipsis in the middle.

[Screenshot]

Actual behavior

text runs into neighboring column.

[paulschreiber]

Perhaps we can use something like this: https://github.com/bluepeter/react-middle-ellipsis

There isn't yet a CSS rule for middle truncation. Draft: w3c/csswg-drafts#3937

[Hanal-code]

@josebui First, widening the file name column can prevent the text display challenge. Can you move the file size column to right?

[paulschreiber]

@Hanal-code That won't solve the problem for small viewport sizes.

[Hanal-code]

@paulschreiber I added the expected behaviors including the truncation with mockup above

[paulschreiber]

This is fixed on staging:

1. There is more space for long names
2. Names that are still too long are middle-truncated.