[MM-57266] UX improvements to call card (post component)

[streamer45]

Summary

PR implements improvements as suggested in the design file

@matthewbirtch One bit missing here is the row divider in "narrow" view. This is because it's a bit tricky to change layout dynamically as we'd need to show an element that is not there naturally. It can be done but it may end up being hacky as CSS would handle any wrapping naturally when necessary. But let me know how important this is and whether we should reconsider.

@cpoile On the above, let me know if you have any ideas but the only solution I could think of so far would be to hook up a ResizeObserver and dynamically check on div width to render the divider but it's probably going to be a perf nightmare.

Screenshots

Ticket Link

https://mattermost.atlassian.net/browse/MM-57266

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 11.05%. Comparing base (fb8a905) to head (8731f45).

Additional details and impacted files

@@                  Coverage Diff                  @@
##           styled-components-v6     #675   +/-   ##
=====================================================
  Coverage                 11.05%   11.05%           
=====================================================
  Files                        27       27           
  Lines                      5690     5690           
=====================================================
  Hits                        629      629           
  Misses                     5003     5003           
  Partials                     58       58           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cpoile]

Would css container queries work? I'm not sure what browsers we have to support (it's newer) (https://caniuse.com/css-container-queries).
Since we can assume the card will wrap at a certain viewport width, could we use a media query event?
This is useful: https://tigeroakes.com/posts/resize-event-alternatives/

[streamer45]

Would css container queries work? I'm not sure what browsers we have to support (it's newer) (https://caniuse.com/css-container-queries).

Thanks! Let me look into that.

Since we can assume the card will wrap at a certain viewport width, could we use a media query event? This is useful: https://tigeroakes.com/posts/resize-event-alternatives/

It's not really the viewport the main issue, but the fact the component renders in RHS and RHS is expansible so it's a bit more tricky. Unless of course we wrapped when in RHS always but that would be a big generalization.

[streamer45]

@cpoile Container queries seem to be exactly what we require here! The only problem now is that we need to bump styled components to make them work (from v5 to v6) which may turn out to be a bit of a pain, getting all sorts of errors. Will keep you posted.

[matthewbirtch]

Add here as well

&:empty {
    display: none;
}

[matthewbirtch]

This is looking great. Thanks for the work on it @streamer45. A few minor things from me:

1. In the "Call ended" state, in the RHS there is extra space at the bottom of the card. It's likely because the right content container is still present, but empty and the gap is added.
   

2. For the divider, it would be great if we can add it somehow as it helps make it look more organized when it wraps. If we are able to do @container queries so that the border and gap shows only when the component is below 400px (roughly) that could work.

3. Can we reduce the gap between the avatars and the button?
   

[streamer45]

Rebased and applied the changes (using @container queries now). Should look better now.

[matthewbirtch]

Thanks @streamer45. Looks great now. Just one minor comment. Should be good to go once that's updated.

[matthewbirtch]

Thanks @streamer45