Adaptive UI

[darkdragon-001]

Description

Element website (PWA) should adapt for small-width screens:

• The leftmost bar with only the "+" icon should be moved somewhere else (it is always a waste of space IMHO)
• The profile/search/people/rooms column should be hidden behind a "…"-button
• Text should be located below the user avatars instead of being right of them

Steps to reproduce

• Try to shrink browser window to effective 360px width (Librem 5).

Describe how what happens differs from what you expected.

See Description.

Currently, the app has a minimum width of 500px and is unusable:

Version information

• Platform: web (in-browser)

For the web app:

• Browser: Chrome
• OS: Ubuntu 20.04
• URL: app.element.io

Background

Linux phones are on the rise. Most of the potential users are using Matrix chat protocol (that's why Purism mentions the Matrix protocol for their desktop SMS/chat app Chatty). The Linux landscape is diverse by nature (PureOS, UBPorts, PostmarketOS, Mobian, ...) so PWAs are a very promising solution to publish a single app for all platforms (including desktop and mobile). Element/Riot is providing an outstanding PWA so far, but needs some UI adaptions to work in small-width screen scenarios.

Librem 5 screen info, Demonstration of adaptive behavior

[t3chguy]

Closing in favour of #8733 and #1633