Timeline layout is poor when there is limited horizontal space

daniellekirkwood commented 2 years ago

Your use case

What would you like to do?

Fix the spacing on messages on the Timeline. (including moving the read receipts slightly) This happens in all Appearance styles (not just with Bubbles). I run into it daily and use a fairly large external monitor.

This will help alleviate some pain when the Threads panel is open

Why would you like to do it?

Make the most of the space whilst still being readable
Reduce odd looking white space

Screenshots when Thread Panel is open:

1. Bubbles	2. Modern	3. IRC

germain-gg commented 2 years ago

Wondering whether we can re-use some that PR https://github.com/matrix-org/matrix-react-sdk/pull/7297 in this context?

t3chguy commented 2 years ago

This isn't limited to threads though, any wide right panel will do this.

toger5 commented 2 years ago

I think as @MadLittleMods mentioned here it might be interesting to get all those styles into one. That would make it all look more consistent and reduce the styles that need to be maintained. Especially if our current style for the main timeline would benefit from being more usable when there is little horizontal space anyways.

germain-gg commented 2 years ago

Paging @janogarcia as he had a lot of good reasons to create a slightly different experience for how messages are rendered in a thread context

janogarcia commented 2 years ago

There's definitely a ton of stuff we should do to improve responsiveness in the app in general. Danielle's screenshots show how far we still are from having solid support for it.

Application chrome

Improve the layout rules for the main containers in the app (left sidebar, main container, and right sidebar): minimum/maximum widths, ratios, and resizing behavior .

Components

Make sure that every component in the timeline behaves responsively down to the smallest usable width.
Make the timeline components respond to their container's width (ala CSS Container Queries) rather than the client's viewport width (I remember @gsouquet saying that we actually have a library in place for accomplishing that in a performant way).

Threads

@gsouquet Rendering messages in threads those shouldn't be any different from those of the main timeline. What we need is just having a single responsive component that can work in any context (main timeline, maximized widgets, threads...).

Also, Danielle's screenshot is showing a different layout for timestamps in messages for threads (which makes matters worse), but those aren't actually following the design spec. We only use that layout for timestamps in the thread list, which might have confused you.

element-hq / element-web