Fade long channel names in sidebar

[maxpoulin64]

This uses a few CSS tricks to fade away long channel names in the sidebar so the badge don't overlap on top of the channel names.

[xPaw]

One property per line please.

[astorije]

Screenshots?

[maxpoulin64]

[xPaw]

Okay, I tried this now, and there's one thing I don't like about it. Even if you delete close button element, the name still doesn't expand past the notification badge. It simply cuts off where the notification badge would be, without any gradient.

If you can fix this, that would be nice!

[maxpoulin64]

Updated. I don't know where exactly you saw that, but I changed the place where the gradient is applied so the trick is simpler which makes it easier to make look clean. I also made sure to move the badge out of the way by putting it back to position:absolute when it fades away. It should look pretty good now no matter what.

[xPaw]

👍

[AlMcKinlay]

This is pretty awesome, thanks @maxpoulin64

Can you rebase, and check that the new stylelint doesn't break the build for this, and then I'm happy to merge.

👍

[maxpoulin64]

@YaManicKill Here you go. It did break all over the place, and it didn't merge properly at all either. Ended up just redoing it over master.

[astorije]

I love it, excellent job @maxpoulin64!

I did notice a small issue though: when the name is long, hovering on the name is messing up with the channel closing button (×). I know we mentioned removing it, but it's not the case yet (and it is not sure yet). Here is what I'm talking about (notice the first and third lines):

Do you think you could fix this before we merge? :-/

[astorije]

After discussing with @maxpoulin64 on IRC, he fixed this and it does look terrific. So 👍 and merging.

Also, I'm re-labeling this as a bugfix since currently long channel names are simply not being displayed well: they appear on a second line and get cut at the end of the end of the sidebar. Leaving as enhancement too considering @maxpoulin64 went well beyond duty :-)