left-sidebar: Allow upto 2 lines for PMs

[jai2201]

#21003

GIFs or screenshots:

[jai2201]

@timabbott
I had to use
display: -webkit-box
for performing this action with the use of only CSS, as normally text-overflow: ellipsis; works only for 1 line, but if we want to use it for 2 lines, we would need display as -webkit-box

and style-lint won't allow me using this property as display, so had to disable stylelint on this specific CSS property.

It would be great if there's any other alternative to allow this display property through style-lint.

[timabbott]

What does this do on non-webkit browsers? Also, what linter rule are you disabling?

[jai2201]

@timabbott I disabled the all stylelint rules for these 5 lines of CSS as display: -webit-box is not a valid for display property in stylelint library.

and on non-webkit browers, these CSS ofc won't work if we want to go with CSS only method.
But now a days, Every browser supports -webkit except Internet Explorer

[jai2201]

There's also an other alternative method to do this change, but it would involve JS -

Using the Clamp.JS module.

[timabbott]

Can you post the caniuse details confirming that this will work in all browsers, and test in firefox? It's important for reviewers to independently verify those details.

[jai2201]

Hey Tim , I tested this on firefox and it's working perfectly fine!
also here's the ss of caniuse

[jai2201]

[jai2201]

@andersk, I have made the changes you asked for, please have a look.

[amanagr]

Another option is to show pre-formatted text using white-space: pre, but the method in this pr is better if it works. We do have to write something like to pre-format the text:

    let names = get_display_full_names(other_ids).sort().join(", ");
    if (names.length > 26) {
        names = names.slice(0, 27) + "\n" + names.slice(27);
    }

    if (names.length > 55) {
        names = names.slice(0, 55) + "...";
    }

[jai2201]

Another option is to show pre-formatted text using white-space: pre, but the method in this pr is better if it works. We do have to write something like to pre-format the text:

    let names = get_display_full_names(other_ids).sort().join(", ");
    if (names.length > 26) {
        names = names.slice(0, 27) + "\n" + names.slice(27);
    }

    if (names.length > 55) {
        names = names.slice(0, 55) + "...";
    }

yeah, this method ofc is available, but i wanted to avoid the use of JS for this, which is why i used -webkit.
and it do works in all the modern browsers according to caniuse.

[timabbott]

Squashed and merged, after writing a proper commit message. Thanks @jai2201!

Please read the commit message I used and adjust your future PRs to use that style -- commit messages should explain why a change is being made and why anything potentially unusual in the commits was done.