The placement of the component preview is sometimes inconsistent

So the problem is "easy" to see when you remove the scaling:

Here is a component where the placement is right:

And here is a component where the placement is incorrect:

The problem is that Radix Tooltip doesn't take the scaling into consideration, so, since the component in incorrect example would collide with the viewport, radix adjust the position.

Setting the prop avoidCollisions={false} possibly fixes the problem, but might introduce another one, in case there is an actual preview that does collide (goes outside the viewport), it will not be adjusted. So I don't think that's the right solution here.

Adding a wrapper as in the MR, is a possible fix:

wim leers → credited kristen pol → .

@kristen pol filed a duplicate bug report at 🐛 XB component thumbnail placement is inconsistent Active .

Noticed this when working on sections too.

@johnwebdev your MR is great! It fixes the issue as far as I can tell. I've added to it to fix another issue that's been bothering me!

The way the scaling is applied meant that when a component is scaled down, the rounded corners of the Panel were ALSO scaled down which meant the bigger a component, the smaller the rounded corner radius. You can see this in the screenshots in #5.

I also took a moment to tidy up the code and remove some bits that weren't needed.

YAY! Thanks!