Ability to deselect everything by clicking outside the phone frame?

Getting rid of the pesky blue line in the header a few updates back has been such a relief lately.

There is one item remaining still that has a similar barging effect on the eyes - the screen label blue outline:


There doesn't seem to be an easy way to simply click off the phone frame and have everything deselected, so we can have a better sense of layout, spacing and overall aesthetics.

For a while, I just lived with it, until I realized I can get rid of that outline by selecting a component in the left panel that isn't part of the current screen. However, that is basically a poke in the dark, since it is not immediately obvious which one to select.

So I usually just keep clicking randomly on various components in the left panel until I land on one that is part of another screen, which gets rid of the blue outline, so I can have a clean preview to look at.

Wouldn't it be much simpler to just click off the phone frame, anywhere on the surrounding blank canvas, to have everything deselected?

I understand that this may impact what is shown in the right panel, but I am sure workarounds can be found, like simply showing a message like: "Please select a screen or a component to view its properties".



Thanks for this feedback as well @27shutterclicks, the mockups you've been posting have been great :star_struck:

I've filed this with the mobile team as well for them to take a look at and will let folks now here if it's included :slightly_smiling_face:

1 Like

@Kabirdas I just came across an existing screen that already accounts for the scenario when no components are selected. Basically, part of my suggestion above is already accomplished.

Strangely, the only way to see this screen is by deleting all of the components from a screen. There is no way that I know of to see this while the screen still has components.

So maybe most of the elements to achieve my suggestion are already in place?