Fix overflow when long unbreakable names are used

[anxolerd]

Problem

Long unbreakable channel names break the layout and make cute mojibrag 🔈 look ugly 😢 For more details see #35

Solution

Allow browser to break unbreakable words by providing word-wrap and word-break styles for channel name views.

Screenshots

Before

After

[notwaldorf]

This is great! Thanks so much! What do you feel about truncating in the side nav list and the new-post part? I.e just having "HeyThisIsAPrettyLo..." instead? We can keep the whole name in the main posts h1

[anxolerd]

I'd really like to shorten the names in app-drawer and new-post as you suggested, but, unfortunately, I'm stuck with that. Despite I managed to truncate the name in app-drawer (using magic numbers which I do not like at all)

.channel-name {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: 120px;  /* MAGIC NUMBER */
  height: 1.5em;  /* ONE MORE MAGIC NUMBER */
  vertical-align: middle;
}

I'm unable to do the same for new-post component, as the POST button can have variable length depending on localization. Hence I cannot use some magic number there.

I'll be really glad if someone helps me to figure out the way to overcome that issues I encountered.

[notwaldorf]

Oh, that's a good question! Text truncation is always super hard.

So i've played around with it, and for the nav links (the a inside the channel-item this seems to work (it doesn't actually show an ellipsis, but it at least truncates)

    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;

For something like span.title inside of new-post, you can do a variation on that, but add display: inline-block (because a span is just inline, and sizing is weird unless it's a block)

    text-overflow: ellipsis;
    overflow: hidden;
    width: 70%;  /* hopefully it's wide enough */
    white-space: nowrap;
    display: inline-block;

WDYT?

[anxolerd]

1. As for channel-item such solution breaks the positioning of gear icon. (It will be placed far away to the right and be invisible) Moreover the text is not truncated, which you can see from chrome dev tools.

   

2. As for span.title inside of new-post: I came to the similar solution. However I do not like it as

   • 70% is still a magic number -- why not 71% ?

   • There are layout issues when the POST button has a longer title (I've got that with Ukrainian localization and 410px screen width)

     

[notwaldorf]

70% is still a magic number -- why not 71% ? well, at some point we have to make some approximations. if 70 looks bad in ukrainian, maybe 60%? You could make this come from a computed class that does an getComputedClientRect on the button, but i think that's overkill.

Also, for the channel-item, i think this on the inner span (that contains the channel title) works:

display: inline-block;
    width: 120px;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;

If you really want to get around the 120px, you can make a conditional class that returns 200px - n*40px, where n is how many icons you're showing (gear or global)

Also, for all these truncated titles, i'd make sure that the title property is set to the original text (so that you can hover over and find out what the full name is)

[anxolerd]

Hm. It seems, I've found a solution to overcome the problem. Here is what mojibrag will look like:

BTW, the last commit may probably resolve #36.

Please, check if everything is OK.

[anxolerd]

Ping

[anxolerd]

@notwaldorf ping

[notwaldorf]

Ah sorry, got a little bit busy with work. I'll take a look at this today