Component label misalignment at editor corners

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When a component is dragged on the Editor there is a label(in red) that comes over it. It is always fixed to the top right corner, aligning with the top edge.

Now when the component is on the right corner of the editor, the label doesn't appear properly:

Expected behavior 🤔

This UI problem can be fixed by placing the label either inside of the component (Makeswift like) or at the bottom/opposite side of the component.

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

No response

[Janpot]

This UI problem can be fixed by placing the label either inside of the component (Makeswift like) or at the bottom/opposite side of the component.

Or the lazy way would be to add default margin to the top of the page, retool-style 🙂

[prakhargupta1]

I think we should do it. There is no padding in the deployed Apps as well.

The editor size will decrease after we do this. Later on we will have to resize (Zoom out) entire Toolpad to create more visual space.

[apedroferreira]

does having moved the red label to the bottom of components at the top fix this? or do we still want to try having more space at the top?

[Janpot]

I'm not sure more space at the top is a better solution. The drawback of the current solution is that the selection hint may be at an unintuitive place. i.e. the selected component may have higher height than the viewport, should you scroll up, or down to find the badge?

Ideally, for the case close to the top edge, we'd move that selection hint a bit down and align its top edge with the top edge of the selected component. That way, the answer to the previous question will always be "up". The drawback of that is that when a component is selected, it becomes interactive, thus the badge may obscure some interactivity.

The solution makeswift came up with is an interesting one. They only show that badge on hover, and not when the component is selected. It may be worth exploring. otherwise we can close this issue as far as I'm concerned.

https://user-images.githubusercontent.com/2109932/185174636-661546fd-7bd5-46d6-a27f-fc21b563e9d0.mov

[apedroferreira]

I'm fine with moving the label inside the elements at the top, instead of below them as it is right now, as long as we agree that it's a better solution than the current one. It should be a quick change. I think it has some advantages and disadvantages, but it definitely seems less "surprising" for the user which seems like a big advantage, if we don't care about covering the selected component a bit as much.

Showing the label on hover only also shouldn't be difficult, even though it doesn't tackle this issue directly (it's probably a bit lower priority).

[prakhargupta1]

Keeping the label aligned with the top edge is better than the bottom edge as the user will always know where the label will appear.

As far as interfering with the component is concerned, I think the bottom edge solution is better because it will never come over the component. And since it is big enough user can scroll up/down and find it quickly.

Show on hover is something that can also be explored later on.

To me, it is fine either way for now. We can close the issue as well, as in the current form at least it doesn't appear buggy.

[apedroferreira]

ok let's close it, i can keep a note about exploring the other options in a PR soon if we still want to consider them!

[Janpot]

If the UX can still be improved, I see no harm in keeping an issue open to keep track of that

[apedroferreira]

If the UX can still be improved, I see no harm in keeping an issue open to keep track of that

yeah that makes sense. reopened :)

[Janpot]

Let's close it, we've been using the current implementation long enough and I don't feel like there are issues with it.