Hidden events: revert back them centered

[pioneer]

Recently, those events have got left alignment (matrix-org/matrix-react-sdk#6477). While it perfectly aligns with the classic Slack-like design of Element that has everything aligned to the left, this is not the same with the bubbles. I see at least two reasons for reverting back the centered events, please see below.

Reason 1: everyone else does that. Literally every single messenger with bubbles I know (Matrix: Schildi, Beeper, FluffyChat; Telegram, Viber, Signal, Skype) uses the centered alignment, see the screenshots attached. So, it's likely that whoever would want to use the bubbles layout, they could expect the same UI experience they see in other messengers.

The #18132 reasonable argument that it's hard to read can be overcome by wrapping the events in smaller bubbles, I think the code can be even adopted from SchildiChat or the UI approach on compacting the events from FluffyChat.

Reason 2: it makes sense. The bubbles layout concept provides the following agreement: what is related to others is on the left, what is related to you is on the right. However, the events like "someone joined", "someone changed the avatar" are related to both you and others, since they affect equally everyone in the chat. So, aligning them to the center plays well with the left-right approach.

[ShadowJonathan]

I think that, if they were to return to a centered look, they should have a bit more visibility like it does in beeper there, a bit more coloured padding. Right now they look very claustrophobic and "out of place" if they're placed in the middle of the timeline, and so maybe that'll help remove that feeling.

[amshakal]

Hi, that's quite a fair point. We initally had in centered for that reason, the rationale for moving it to the left was:

1. Familiarity on element, so it doesn't feel different from the modern and IRC layout we have currently
2. Since only the messages user sends themselves are on the right, all messages received are on left, and the main pannel is on the left as well, the user doesn't have to move their eyes back and forth to quickly read all the messages, events, updates etc. We decided to only keep big events like date centered.
3. Like johnathan mentioned, it was feeling very calusterphobic. I think that's not only because of padding but also because some of our events are very long in length and they looked a bit awkward in the center

Having said that, you make a very insightful points and it could work the other way as well.

[pioneer]

1. This depends on whom Element would want to attract with the new bubbles layout, the existing Element users or new users coming from other messengers? Who we are targeting first by adding the new bubbles layout feature?
2. IMO messages from the server are a bit more "special" than regular messages from regular users, so worth a more special place on the screen. Also, how would you distinguish "big" events from smaller ones?
   Eyes movement is a more difficult thing, though. We can split this issue into two cases:
   a) the screen size is "normal" (i.e. for me FullHD resolution falls into the category), so left and right edges are not so far from each other, in this case, IMO eyes movement is not a big issue
   b) the screen size is way large (i.e. on my 4K monitor), so eyes movement becomes a real issue. While for me it's still not a big thing, for others it might be. For such cases what I can remember is the following:

• a FluffyChat or Viber-like approach, the bubbles have a fixed width between the left and the right bubbles, regardless of the screen size, thus having large whitespaces before the left bubbles and after the right bubbles. The whitespace grows when the screen size grows.
• when the screen is too large, everything is enforcedly moved to the left
  I personally strongly prefer this to be as much configurable as possible (as in some Telegram clients, you can set a switch whether to show everything on the left or left and right always, or on the left when the screen size is huge reverting to left and right for "normal" sizes), but this is a common problem with bubbles and we will be facing this large screen issue anyway so it must be solved in some way.

3. If some events are very long, there's a chance they will look claustrophobic on either side of the screen, just because they are long. I see the following ways of overcoming this:

• group events and not show them all by default, like FluffyChat does ("Someone joined and 24 other events")
• limit the width of an event and show it rather multilined (especially makes sense when they are centered)
• limit the width even more by showing three dots within a large event phrase instead of the full text, clicking on the three dots will expand the text
• use smaller fonts for the events

Hope the above makes sense.

[t3chguy]

I think they should match where status messages are, which is currently left-aligned

[daniellekirkwood]

Agreed. We're going to stick to Left-Aligned for now but we really appreciate the feedback!

Please keep it coming :)