Adapt better to narrow screens

[gwicke]

Narrow screens are common on mobile, and when using vector in a narrow sidebar-style window on a desktop. Here are some styling ideas that could help to maximize the content visible on small screens:

• Completely hide the user list by default.
• Hide user icons in chat messages, and reduce margins around messages to a bare minimum. Possibly, set off user names / message boundaries slightly by making them left-bound, and indenting messages a couple of pixels.

[gwicke]

Rough sample styles:

/* Hide link previews (TODO: switch them off) */
.mx_LinkPreviewWidget {
    display: none
}
@media screen and (max-width: 800px) {
    /* Reduce spacing */
    .mx_EventTile_avatar {
        display: none
    }
    .mx_EventTile {
        margin-left: 0;
        margin-top: 5px;
    }
    .mx_EventTile_line {
        margin-left: 12px;
        margin-right: 10px;
    }
    .mx_MatrixChat_middlePanel {
        padding-right: 0px !important;
        padding-left: 5px !important;
    }
    .mx_RoomView_statusAreaBox {
        min-height: 0;
    }
    .mx_RoomStatusBar {
        margin-top: 0;
        min-height: 0;
    }
    .mx_RightPanel {
        display: none;
    }
    .mx_MessageComposer_avatar {
        padding-right: 10px;
        padding-left: 10px;
    }
    .mx_MessageComposer_upload,
    .mx_MessageComposer_voicecall,
    .mx_MessageComposer_videocall {
        padding-left: 3px;
        padding-right: 3px;
    }
}

[ara4n]

Thanks - totally agreed we need a narrower mode; will look at incorporating this. Thanks!

[gwicke]

Render with styles above:

[ara4n]

completely hiding the userlist has now landed on /develop.
we're working on compact CSS for the timeline itself.

[JasonLocklin]

Things have improved, but are still not quite usable at very small window size. It would be nice to be able to put, for instance, a 1:1 chat in a small window to the side of the work are on the desktop.

Current state of Riot web (develop), with "compact layout" enabled, with a small window:

Note that the composer is unusably narrow, and margins around the message list text make it display very inefficiently.

Here is a comparison with glowingbear, at a similar text size, at an even smaller window size. Note that glowingbear is completely usable at this size and riot is completely unusable.

I think the message list and the composer area should have a minimum width specified so that they are preserved in a usable state as long as possible -at the expense of whitespace margins and other areas. As an example, with a min-width of 400px for .mx_RoomView_messageListWrapper and .mx_MessageComposer_wrapper:

The Attachment/Voip buttons are off to the side (note the scroll bar), but could be their own div, and could pop (wrap) down to a second row when the window is too narrow for both the compose area and those buttons.

Overall, there is still room in various whitespace areas to more efficiently fill a small window. For the message list, most of the gain would come from changing the way the text flows around/below user icons/read receipts. For instance, paragraphs could be wrapped as wide as the whole message list like this:

| (O) User: () () () ()  |<- read recipts
| Text that is the full  |
| message list  width... |

[drue]

Link summaries should probably float below the thumbnail.

[lpar]

To add to the previous comment, here's what my system alerts looked like when I logged in just now:

[aaronraimist]

Example of how bad Riot is right now with the memberlist: https://twitter.com/Obijuan_cube/status/1239860893539864576

[tredondo]

Quoting totally kills the width.

[MadLittleMods]

Compact link previews is tracked by #7897

Related issues:

• Riot Web Screen Real Estate In Narrow Views #6488
• compact layout tweaks #4363
• Revamp "compact timeline" mode #12998
• ux: more compact layout needed #6982
• Minimize UI noise in message feed #4317
• Notifications & room info panes as slide-over #16518