Epic: Improve dashboard responsive layout

[gtsiolis]

Summary

Although the dashboard layout was not optimized for being responsive on smaller viewports, layout is relatively accessible for medium and large viewports. ✔️

Content and functionality should be designed to be available and useful independent of page constraints. ❗

Context

Responsive layout relies on practices like reflowing elements and content, using truncation or tooltips, and more.

There have been ad-hoc efforts in improving layout and rendering issues like #3859, #10747, #3995, using truncation, etc, we should generally avoid modals when possible except from when revealing critical information, etc.

For more context, see:

1. Previous doc (internal) on proposing a mobile-friendly Gitpod.
2. Responsive design guidelines on Tailwind.
3. Some early designs below on how to use a grid column layout for supporting a responsive layout on small viewports.

Value

Since the dashboard redesign in March 2021, multiple users from the community as well as team members internally have reported layout issues (#3859, #3829, etc) on small viewports or tablets.

Although Gitpod was not designed to be used primarily on mobile devices, we claim on www.gitpod.io that Gitpod is also optimized for small viewpots and tables, see relevant section.

Acceptance Criteria

A user should be able to navigate through the dashboard and admin dashboard, having access to all content and functionality of the product.

Measurement

Some possible way to measure success here could be measuring how many users 🅰️ access the dashboard or 🅱️ open workspaces on mobile devices.

In scope

The scope of this issue includes:

• 🅰️ Collecting issues and bug reports around the responsive layout of the dashboard, see task list below.
• 🅱️ Identifying the areas that need to be changed in the dashboard on small viewports
  • So far, the following areas seem that could benefit from some design input.
    • Top navigation, including the organization selector and the combination with user menu on the right.
    • Settings left sidebar.
    • Main content area.
    • Modals that can be full pages, like in the access token creation flow, see /tokens/create.
    • ...

Out of scope

Optionally, it would be nice to:

1. Have some guidelines documented around layout, responsive practices, grid, and components like tooltip to be used.
2. Making sure that the default editor on the browser is functionally usable would be nice, although most of it can be in the scope of implementation on the upstream VS Code project.

Responsive layout issues

Preview Give feedback

1. Settings page on mobile layout #8133
   help wanted meta: never-stale team: webapp type: feature request +4
2. Enable vscode keyboard shortcuts on mobile #16190
   +0
3. Move less frequently used organization pages under the org selector #16244
   ⚙️ Groundwork aspect: navigation component: dashboard needs visual design team: webapp type: improvement +6
   

[gtsiolis]

Re-opening as this is still relevant.

[jankeromnes]

I would absolutely love to add minimum viable responsiveness to our dashboard. This unfinished business has been gnawing at me for months now.

I can time-box this e.g. to one or two days if that's helpful. Maybe we can schedule this next week or so? 🙏

[jankeromnes]

Not stale 😇