[FOLLOW-UP] Issues and visual adjustments to chat split view

[nimishavijay]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Noticed issues:

• [SPLIT VIEW] Message buttons bar should show up on hover bigger area #16413
• [SPLIT VIEW] No reserved space for new reaction in small split view #16414
• [SPLIT VIEW] Jump when short messages are sent #16594
• broken styles for shared files (esp. voice messages)
  • Spinner position on upload
  • Size of link/document/table integrations
  • Size of maps
• broken styles with short messages and narrow screens (magic numbers)
• broken styles for markdown (esp. tables)
• fix(settings): keep classic chat style for older server versions #16693

Design follow-ups:

Before	After

Small adjustments which make the split view look more cohesive:

• Add more spacing between messages of different authors
• Align avatar to author name
• reduce size of author name
• align avatar of own messages to message container
• Add more gap between message text and reactions row

In the inspector here are the changes I made to achieve the "After" screenshot

.wrapper.incoming .messages__avatar-wrapper {
  padding-block-start: calc(3*var(--default-grid-baseline)); }

.wrapper {
  padding: calc(2*var(--default-grid-baseline)) 0; }

.messages__author {
  font-size: small; }

.wrapper.outgoing .messages__avatar-wrapper {
  padding-block-start: calc(2*var(--default-grid-baseline)); }

.message-main--sided:has(.message-main__text):not(.message-main--compressed) .message-actions {
  padding-top: var(--default-grid-baseline); }

Message actions:

• keep consistent placement for actions (close to top/bottom corner, regardless if inside or outside)
  • inside is covering existing reactions / timestamp
  • outside is taking reserved space from chat width

outside	inside

• Consider buttons size reduction (small, 24px)

  • For both split and normal chat-view?
  • Size would be aligned with 'reply in thread' and 'react to message' buttons
  • less overlay over message content
  • less space reserved for actions, more place for content

• Open three-dots menu with right-click

  • in addition to existing show on hover to not break flow users are used to?

• For quick reactions, consider moving them?

Variant	Mockup	Pros	Cons
Separate as popup		less clicks	a11y
Merge as second row		less clicks	increase expected height
Merge as same row		less clicks	won't fit on narrow screens, should be hidden
Hide under three-dots		--	same or more clicks to find needed reactions

Pinned messages:

• Consider another placement for the icon in split view:

[Antreesy]

Converting this issue to a general follow-up