MM-23772/MM-23696 Fix channel header popover for existing channels

[nevyangelova]

Summary

After merging #5159 the popover changed for existing channels. After discussing with @esethna we decided to keep single line breaks on one line, and only consider double breaks. This also addresses CSS fixed introduced in https://mattermost.atlassian.net/browse/MM-23772 the case for which were missed in the previous fixes. Please keep in mind while testing:

1. CSS cases

• When the user is a member of a single team and uses the old sidebar (DM's and Channels).
• When the user is a member of a single team and uses the new sidebar (DM's and Channels).
• When the user is a member of multiple teams and uses the old sidebar (DM's and Channels).
• When the user is a member of multiple teams and uses the new sidebar (DM's and Channels).

2. Popover cases

• Multiple single lines and a double line should align the single lines in the header and only create a line break for the double line.
• Make sure existing channel descriptions don't break

[Process](https://docs.mattermost.com/process/feature-release.html) | [Release Checklist channel](https://community.mattermost.com/core/channels/release-checklist) | **NEXT RELEASE v5.22 - THURSDAY, 16 APRIL 2020**
- Wed, Mar 18: Feature Complete;
- Wed, Mar 25: Judgment Day;
- Thur, Mar 26: Code Complete;
- Thur, Apr 2: RC-1 Cut;
- Fri, Apr 3: RC Testing;
- Mon, Apr 6: RC Testing Finished;
- Tue, April 14: Release Build Cut;
- Thur, April 16: Release Day 
**NEXT MOBILE APP RELEASE v1.30 - 16 APRIL 2020**

I need all the help I could get with testing this as some test cases have been missed and current channels displays were broken.

Ticket link

https://mattermost.atlassian.net/browse/MM-23772
https://mattermost.atlassian.net/browse/MM-23696

[esethna]

@nevyangelova bullet points are broken on hovering. They should appear on separate lines (as tested on community server)

- test
- test 2

Another example:

[esethna]

@nevyangelova there is a small (~1px) shift in the pop-up and text with DMs

That shift is larger with the new sidebar enabled

[nevyangelova]

@esethna FYI the Popover is inserted into the top level html without any relation to the channel header, this is why we can't position it relatively and keep having to tweak the CSS. Any new elements that affect the general layout will cause it to be misaligned. I have proposed a definitive fix in https://mattermost.atlassian.net/browse/MM-23621

[bradjcoughlin]

Out of curiosity, why is the .5px required? I haven't encountered a situation in webapp that required this before.

[nevyangelova]

I think this is a combination of a mix between em's and pixels somewhere down the line. I used those values because this is the most correct adjustment for the popover. We can address this in the ticket above as well.

[esethna]

Thanks @nevyangelova!

[jgilliam17]

Thank you @nevyangelova
Looks good, just one small issue.

• On DMs when user has a status of Away or DND popover shifts due to change in status text length.
• Question for UX, is it possible to start the channel description on DMs at the point where status change can no longer have an impact? e.g. take DND length and start all descriptions at this point on the header regardless of the actual status shown

[jgilliam17]

One more thing.

• When channel has guests popover is out of line. See Town Square on test server.

[mattermod]

Mattermost test server updated with git commit f5e9019e982688323feb1644d66c1765831a9a35.

Access here: https://mattermost-webapp-pr-5258.test.mattermost.cloud

[jgilliam17]

Thank you @nevyangelova
Tested, looks good to merge.

• Verified channel description popover on both desktop and browser.
• Verified for users that belong to only one team, using old and new sidebar.
• Verified for users that belong to more then one team, using old and new sidebar.
• Verified popover for channels with guests, popover does not shift due to longer guest label under the channel name
• Verified popover for DMs, no shift - popover displays as expected
• Verified multiple single lines align as the single lines in the header and create a line break for the double line.

[mattermod]

Test server destroyed