Riot Web Screen Real Estate In Narrow Views

[Cerothen]

Description

Riot window real estate is becoming a more complex commodity it seems with the advent of new features.

Specifically I have been using the riot desktop (electron) client in windows taking up 1/3rd of the screen horizontally for a while now and its been "OK" but a little tight, the conversation window doesn't need to take up a ton of the screen and take away from what a person is actually doing but should be able to be on the screen at all times to allow quick responding and conversation. With the release of 0.14.0 and its separate community area next to the conversation view the space usage getting worse. It would be nice if the narrow view could be revisited with a little more appreciation to the value of screen real estate.

In this image you can see that there isn't much room around the chat area even with everything packed away and compressed as much as possible. For layout in narrow views the following changes would be nice to maximize what people actually care about (the conversation and the content):

• Smaller Icons in community area.
• Less horizontal padding in community area.
• Less horizontal padding on conversation/room list.
• Allow the actual message area to be wider since in narrow views 30+% white space is just a waste. (this is highlighted by the chart which is as wide as the messages can get)
• Reduce the size of the Upload,Call,Video,Integrations buttons in the message edit area.
• Allow the message editing area to be wider to take up the unused white space.

Thanks!

Version information

• Platform: Web and Desktop

For the web app:

• Browser: Chrome, and Electron Desktop
• OS: Windows (presumably all?)
• URL: RiotWeb Version 0.14.0

For the desktop app:

• OS: Windows
• Version: 0.14.0

[lukebarnard1]

Instead of making everything smaller, we could consider hiding stuff when the view is narrow, such as:

• the tag panel (it could appear if the mouse lingers on the left-most side)
• the buttons in the composer (they could be hidden behind a context menu)

We already apply this to the member list and it works quite well.

[4b69]

Was about to make my own issue before seeing this. What is so special about communities it needs its own bar and can't share the one right next to it? Quite a waste of space

[ara4n]

folks: remember you can just turn off the Tag Panel in settings if you don't like it. the reason it's on by default is that we expect switching between communities to get more and more useful and important in the nearish future.

[Cerothen]

@ara4n turning off the community panel does help, I don't know why I didn't see the option before. but I still think there could be some better use of space in narrow views, especially in the case of the actual messages only being about 60-70% width, the menu button doesn't really need its own area reserved it could be more like the room mouse over menu button.

Hello, I made a custom css for embedding riot in a ~300px width iframe.
css:
https://gist.github.com/mxnemu/113970a082871feb51af9ac9f055d24f
before:

after:

I manually added the file into riot's index.html with <link rel="stylesheet" href="stream.css">

Most changes are padding reductions. The sidebar and top bar were hidden. The chat compose box was changed to wrap after the input, so the buttons are in a new row.

I hope this can be helpful.

[lukebarnard1]

@mxnemu that looks great! Would you consider contributing this as a pull request?

@lukebarnard1
I don't really know about the whole scss/node/react ecosystem or how to organize style sheets for big projects. I think it would be easier if someone who knows the riot infrastructure and that stuff can apply my css correctly to the system. I'm not a designer, so I don't plan to make any more css contributions.

#4729 also seems to be about optimizing narrow views.

[geckolinux]

Trying to add a reaction to a post on a narrow window:

[geckolinux]

And there is also a lot of wasted space to the right of the chat space, allowing only 1 or 2 words per line of chat: