Reduce content reflow during animation on rollover

+1 to this, its nice to indicate what your hovering over, but very distracting and the extra padding on the wrapping divs hurts your ability to predict what the end product will actually be.

this is a hacky attempt at removing the padding that gets added on elements when focused in the mercury editor preview window.

I modified build/preview-screen.js to remove the fixed 10px padding that it sets when an element is focused.
I see there is a preview-screen.min.js which I did not modify in this, not sure where/if that comes into play in mercury editor, but I don't believe my site uses the minified one even with aggregation turned on.

I also see that there are source javascript files which I imagine are used via node/postcss to build the "build" folder file that I patched, I'm not sure what the best practices are for these kinds of patches, but this worked in dev for me.

In many cases we do need the padding vertically so section and component controls don't overlap. The horizontal padding is needed in some cases as well, but having it as a default seems to cause more trouble. In an effort to improve the situation while we evaluate alternatives, I've created a configuration for block and inline padding, which is accessible from the Dialog Settings page (now relabeled Dialog & UI Settings). The default will be 10 pixels vertical, 0 pixels horizontal padding, but can be changed as desired by the end user.

I do agree with the need, I think I solved that early on by adding my own padding within my theme.

just wanted to add, great to see the progress / work you and your team are doing! while I think there's alot of buzz around experience builder, I think this "node centric" paragraph/component approach is significantly easier to understand than a page/block approach, depending on the scale of the site.

Merged into 2.2.x.

Automatically closed - issue fixed for 2 weeks with no activity.