Long folder names are truncated in file picker

[MorrisJobke]

• having two folder names that are long and only have a different ending
• move a file into that folder via the context menu and "Copy or move" action
• expected: know which folder has which name
• actual: folder ending is truncated

On iOS this was solved by truncating the middle of the name, which solved that use case, but not the one where the middle part is crucial. See nextcloud/ios#760 by @nikslor. There also the full name is planned to be resolved in full width by a long press click.

any ideas @nextcloud/designers ?

[juliusknorr]

I'm not aware of an easy way to move the ellipsis to the middle of a string with CSS. Maybe @skjnldsv ?

[stefan-niedermann]

@juliushaertl this is not possible with only using css.

[jancborchardt]

There’s a proposal for middle-cropping at https://www.w3.org/wiki/Text-overflow_middle_cropping, but issues for this are open since 7 years or more. :)

What we could do here is simply show the full name on hover as a tooltip. However this should really only happen when the name is too long, because otherwise it’s going to be duplicated.

Another idea would be to move away from this table-style view and instead put the size and modified date in a second row. That way the filename can take up more space and it looks more modern.

[rullzer]

I'd like the tooltip as a quick fix for now at least.

[skjnldsv]

I'll take a look to see if javascript can easily do that.
Something like this, not in the middle, but at least show some part of it?
https://codepen.io/markchitty/pen/RNZbRE

We can even do it in full css 🤔

[skjnldsv]

Fix in #14912