Size Change: +84 B (0%)

Total Size: 1.19 MB

_{compressed-size-action}

I'm noticing the following visual issue on tablet views with long titles:

What do you think about cutting off the text if it's too long and adding an ellipsis? Something along the lines of:

.edit-site-document-actions__title {

    /* ... */

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

I'm noticing the following visual issue on tablet views with long titles:

What do you think about cutting of the text if it's too long and adding an ellipsis? Something along the lines of:

Yeah it's definitely a problem. Noah mentioned it in the issue description "The text should not wrap at all. If the text is too long, it should probably be truncated. However, in this situation, the text isn't even "too long", it just wraps very early." I also brought it up earlier here.

@vindl I was originally planning to address the just the text wrapping, and not the text overflow (overflow would potentially be a separate PR). Giving overflow more thought though, it might be simple to add some basic ellipses, so I'll experiment now and provide updates here. 👍

Giving overflow more thought though, it might be simple to add some basic ellipses, so I'll experiment now and provide updates here

Nice, if it's simple enough, I'm totally fine with merging it along with this

Quick update:

@vindl @noahtallen Adding ellipses at an arbitrary max-width is easy enough (Marko's code works perfectly), but it looks strange when there's still a lot of white-space.

I've been trying to allow text to truncate naturally when there is overflow (and there is no more negative space), but having everything play nicely with flexbox has been challenging. More can be read here. There are solutions proposed in the article, but apparently they don't work with flexbox items nested within other flexbox items, as is the case with our implementation.

I'm planning to explore a bit more to try and figure out a css solution, but if that doesn't work out, I think a follow-up PR might be more appropriate.

Note:
I've been avoiding javascript for now because this seems like a styling concern that's within the wheelhouse of css.

Update:

I now have text overflow being handled by CSS. The updates affected the animations a bit, so I'm in the process of fixing those as well.

It looks like the animations worked all along. The dev build process was acting wonky 🙂

Edit: I originally left the wrong animation here. The corrected one should now be shown below

This might make things tricky, but I think the animation needs to be on the wrapper element so that it also animates the dropdown icon.

The icon should now be animated 🙂