Skip to content

[Feature]: Surface the device toolbar as a preview toolbar button #6240

Description

@glauber-sampaio

Before submitting

  • I searched existing issues and did not find a duplicate.
  • I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

The device toolbar is only reachable through the three-dot menu in the preview chrome row. It is the fastest way to check a layout at a phone or tablet size, but it sits two clicks deep behind a menu you have to already know to open.

Everything else on that row that changes what the preview shows is a visible icon — annotate, screenshot, floating preview:

Preview chrome row icons

I used T3 Code for a while before finding out the device toolbar existed.

Proposed solution

Promote it to an icon button in the chrome row, next to the annotation button, with a pressed state while a fixed viewport is active. Moving it rather than duplicating it keeps the menu for actions that have no icon.

A preview.deviceToolbar command would also make it bindable. mod+shift+d is free outside the terminal, which uses that chord for terminal.splitVertical; Chrome's mod+shift+m is already the model picker here.

Why this matters

Responsive checking is a normal part of working on a page in the preview, and it is currently the only such action hidden in a menu.

Smallest useful scope

The toolbar button alone. The keybinding is separable and could follow #4641.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions