Skip to content

Umami 3.X UI: Mobile/Portrait layout shows even though browser viewport is in landscape (desktop) #4035

Description

@BarnMTB

Describe the Bug

The new UI layout introduced in Umami 3.0 incorrectly triggers the mobile/portrait mode UI if the browser viewport became a bit too narrow for its liking.

This meant that people who use Vertical Tab in browsers like Edge and Firefox, and browsers with designed with Vertical Tabs in mind, like Arc and Zen browser, are being incorrectly served the mobile/portrait UI when the sidebar is too large, which makes using Umami feels instantly clunky.

Ideally, the mobile/portrait UI shouldn't trigger when the browser viewport is in landscape (more width than height).

It is possible to temporary:

  • Resize the sidebar to be narrower
  • Turn on modes that hide or compacts the tab sidebar
  • Or revert back to horizontal tab strip
    in order to widen the browser viewport, and thus get the correct Desktop/landscape layout, but it is inconvenient when juggling between tabs & tasks, and some people do not want their sidebar to be narrow for accessibility & ease of access.

Screenshots

Top: Microsoft Edge and Firefox with Vertical Tabs turned on
Bottom: Arc Browser, and Brave with Vertical Tabs turned on

You can see in the image that Umami shows the top bar with Hamburger menu button, instead of the sidebar that are served in normal circumstances, leading to a subpar experience.

Image

Database

PostgreSQL

Relevant log output

Which Umami version are you using? (if relevant)

3.0.3

Which browser are you using? (if relevant)

Zen Browser, Microsoft Edge, Arc Browser, Brave Browser, and other browsers that has Vertical Tabs

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions