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.

[mxnemu]

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?

[mxnemu]

@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:

[t3chguy]

Disable showing read receipts then.

[geckolinux]

I do like the read receipts. Maybe they could be moved to the left of the chat line.

[t3chguy]

That'll still take up the same amount of space?

[geckolinux]

Isn't it just a problem with a <div> that's too wide for the read indicator? I assumed that since it flows from left to right that the temporary elements would behave better if moved to the left of the chat text lines, leaving the <div> for the text lines to flow uninhibited to the right edge.

[t3chguy]

The div is set for a typical quantity of read receipts, around ten i believe.

[geckolinux]

Hmmm that's right, I forgot how it shows multiple read receipts for group chats. Could it be a flexible width <div>? Or what about showing just one icon for multiple read receipts and putting the list of readers' usernames in a mouseover tooltip?

[foresto]

I took a screen shot in the new Element desktop app, using Electron's developer tools to highlight just how wasteful the margins and rarely-used buttons are.

This is with "Font size" reduced from the default to 14, and with "Use a more compact ‘Modern’ layout" checked, and with the Community panel disabled, and with the Room panel collapsed. Even after jumping through all those hoops, it looks like this:

Only 40% of the available width is given to the most-used thing on the screen: the message text.

Just in case someone wants to argue that it's only 40% because the window isn't very wide, let's keep in mind that (a) not everyone runs only one task at a time maximized on a giant screen, and (b) the window width I used here is more than double what I use on messengers like Adium, Pidgin, Gajim, etc. (The height difference is even larger.)

Note also that only six room icons are available for navigating between conversations. There's space for at least twice that many, and probably more if the icons were scaled along with the rest of the UI.

[ewtoombs]

Here's what I did to fix this:
https://greasyfork.org/en/scripts/429321-element-io-width/code

[ewtoombs]

element added some more garbage to the UI, so I had to update my script:
https://greasyfork.org/en/scripts/429321-element-io-width/versions

[turt2live]

Many of these cases will have been handled over the years, and unfortunately large checklists like this aren't as helpful in modern times. If folks have specific areas they have concerns with, please open new issues.