Element-web: The home page is not using the whole space on large screen resolutions and scrollbar is on the middle

[Porkepix]

Description

The home page is not using the whole space on large screen resolutions and scrollbar is on the middle

Steps to reproduce

• Go on the home page on https://riot.im/app/#/home or https://riot.im/develop/#/home with a large resolution (eg. full HD: 1920x1080)
• You'll see that the main part of the screen isn't using the whole space, and if you scroll, the scrollbar appear in the middle of it, instead of the right border of the screen.

Describe how what happens differs from what you expected.

Scrollbar should be at screen's right border

Version information

• Platform: web

For the web app:

• Browser: Firefox, Chrome
• OS: At least Linux
• URL: riot.im/develop / riot.im/app

Additional notes:

Problem appeared on my Full HD (1920x1080) computer on Linux and on at least someone else's computer. No idea if behavior is the same on macOS or Windows, but it should.
My mac with a reolution of 1440x900 isn't affected on Chrome, scrollbar is at the right border of the screen, and the whole space is used. I couldn't check Firefox due to bug #4803.

[t3chguy]

That is similar behaviour to the room view, so maybe its intentional

Having the scrollbar all the way off to the right would probably be more confusing as the content does not span the full width

There are more generic issues about riot wasting horizontal space that I think supersede this one

[MTRNord]

Made some time ago a Fix for it as a UserStyle: https://userstyles.org/styles/144258/riot-im-wide

[uhoreg]

related to https://github.com/vector-im/riot-web/issues/1371

[storrgie]

@MTRNord appears that userstyle no longer works.

[MTRNord]

@storrgie hm? It does for me. I updated it some time ago for the Homepage.

[lampholder]

Discussing with @ara4n - limiting the width of the timeline text _is_ a feature:

but aesthetically it's generally considered very desirable to cap the maximum width of content (for the same reason that newspapers use columns)

As Matthew also says:

it's a feature, but we need to be smarter in terms of determining the width, especially with widgets etc. so we can use the whole screen

Unstructured lists of current thoughts:

• And article on optimum web readability
• Slack and Discord both just fill the available space with text
• We have the userscript linked from https://github.com/vector-im/riot-web/issues/1371 to try it out
• Applying the userscript on a big screen today means the read notifications can appear very far away from the message, and the current message hover styling only highlights the message text (which helps to line up the message with the notifs, but isn't perfect)

[Porkepix]

It can be a feature or UX choice (I understand the reasons for big text blocks, here it's not the case as the screenshot report for the home with just little image and text blocks on the Webpage, it wouldn't hurt readability to use the whole width).

But if it was to stay as is by choice, the minimum would be in my humble opinion to don't use this kind of frame and define size through CSS so that scrollbar would be at its usual place (on the far right of the screen), allowing user to scroll from anywhere on the webpage rather than just over the (invisible) frame.

[monokh]

Let me know if you decide for the middle column to fill the blank space. I have the required changes in this branch: https://github.com/monokh/riot-web/tree/fluid-layout

Just a thought, but with the fluid layout, if someone did want to have a smaller text columns for readability, they could always resize their window. I understand that it should be readable by default though.

[ElijahLynn]

@MTRNord's userstyle fluid layout still works as of today! Two clicks and it was installed. Then I had to update it to use our custom matrix domain. Pow!

[turt2live]

In practice we fixed this