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
- [ ] https://github.com/gitpod-io/gitpod/issues/8133
- [ ] https://github.com/gitpod-io/gitpod/issues/16190
- [ ] https://github.com/gitpod-io/gitpod/issues/16244

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[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? 🙏

[pri1311]

The responsiveness issue also arises for the edit permissions modal. I didn't see this specifically mentioned anywhere, hence adding it here. Have to resize the window to 90% to see the update permissions button.

[gtsiolis]

Thanks @pri1311! I've reopened #3829 for this.