Epic: Improve dashboard responsive layout

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 https://github.com/gitpod-io/gitpod/issues/3859, https://github.com/gitpod-io/gitpod/issues/10747, https://github.com/gitpod-io/gitpod/pull/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 (https://github.com/gitpod-io/gitpod/issues/3859, https://github.com/gitpod-io/gitpod/issues/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

Start by reviewing the linked responsive design guidelines and the task list of responsive layout issues. Inspect the dashboard areas named in the issue, including top navigation, the settings sidebar, the main content area, and the /tokens/create flow. Done means users can access all dashboard and admin-dashboard content and functionality on small viewports.