fix(MessageList): rewrite CSS layout of chat

[Antreesy]

☑️ Resolves

• Ref Adjust UI according to the design review #12800

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After

Tip

For visual diff use https://www.diffchecker.com/image-compare/

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖥️ Tested with Desktop client or should not be risky for it
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[nimishavijay]

Nice! Looks pretty compact. I'd suggest that these changes be implemented when there's a lack of horizontal space, since we discussed this mostly in the context of the chat during calls.

How about these values are enforced only when the width of the screen falls below the max line width (which I believe is around 700px)?

[Antreesy]

only when the width of the screen falls below the max line width

Some general rework was needed here anyway. Applied reduced padding for sidebar chats only (that is Files integration and during calls)

[Antreesy]

Dropped most of the conditional size changes to establish correct grid layout first. Let's discuss this part, then continue with chat appearance in sidebars

[DorraJaouad]

Good to go 🦅