Adaptive layout for wide screens

[ShadowJonathan]

(Breakout of matrix-org/matrix-react-sdk#6291 (review))

Is your suggestion related to a problem? Please describe.

When using bubble messages on a wide screen, it's often hard to follow along the conversation when i participate in it, as my messages are aligned to the far right of the screen.

Describe the solution you'd like.

Take after telegram. Telegram has an option called "Adaptive layout for wide screens", that aligns the messages to the same side after a certain chat window width;

Additional context

Also see SchildiChat/schildichat-desktop#33

[robintown]

Crazy idea but perhaps Element could automatically transition between modern layout for wide screens, and bubble layout for narrow screens? (so it'd be an additional "Adaptive" layout in appearance settings)

[SimonBrandner]

Crazy idea but perhaps Element could automatically transition between modern layout for wide screens, and bubble layout for narrow screens? (so it'd be an additional "Adaptive" layout in appearance settings)

That sounds interesting, though I think for that to work we would need the layouts to be more similar. E.g. currently replies look completely different (which I am not a big fan of btw) which would make this feel weird

[ShadowJonathan]

It depends, I'm inclined to say no because the different style might be confusing to the user, and maybe not something a current user would like to look at.

Different tastes for different users, the bubble messages look nice, but I'd rather not give it a bad first impression.

[amshakal]

I agree with the problem. On larger screens it's harder to follow along the conversation because the messages are too far apart. Maybe a simpler solution to begin with is the center align the messages from sender and reciever so that there is always an overlap between the two, making it easy to follow along, similar to how whatsapp does it. I'm adding a screenshot for reference.

[ShadowJonathan]

Re: that last image, I think it's also useful to narrow the composer to that width, to keep the composer-timeline "sync"

[amshakal]

Oh interesting, let me make a quick mock up and see how that looks. :)

[daniellekirkwood]

@amshakal do we want to go with a "max-width" approach and centre align the timeline when bubbles are on? (Just like your screenshot...)

[amshakal]

I think centered so it's easy parse through all the messages. (Just like the screenshot)