Need to add 5px space in selected admin widget items

[ketanumretiya030]

On mobile view display widget item very close to each other need to add some space between two widget item.

[ketanumretiya030]

Widget mobiel view

[mukesh27]

Patch.

[mukesh27]

Need to remove margin from class div.widget in 480px media query.

[desrosj]

See #26701 ([26963-26964]).

[afercia]

See also #42001.

Some widgets have an "extra wide" interface which is discussed in #42001. For now, the left and right margins shouldn't be changed.

However, the top and bottom margin shouldn't be reset to 0. It's not about design, it's a functional thing: when dragging a widget, the other widgets "jump" because the dashed "placeholder" has some margin:

This "jump" should be avoided. @mukesh27 approach looks good but instead of removing the margin property entirely I'd suggest to keep margin-left and margin-right to auto !important.

[mukesh27]

Updated patch.

[andraganescu]

Good work @mukesh27 the updated patch works very good!

[SergeyBiryukov]

Removing the trunk version, as this doesn't seem to be a regression in 5.2.

[audrasjb]

Removing commit keyword as this patch still needs some review. Putting this one on my list :-)

[audrasjb]

I refreshed the patch with a full margin declaration and a 5px margin bottom (see screenshot below).

[audrasjb]

46941.2.diff result

[audrasjb]

@afercia the last patch fix the margin gap (see animated screenshot below).
I also removed the !important declaration since it works well without using it.

[audrasjb]

Patch refresh and CSS small declaration changes

[afercia]

I'd tend to think the margin shouldn't be reduced from the original 10 pixels to 5 pixels. Especially on small screens, having more margin helps touch interaction to better target the right widget.

Looking a bit better into this, the breaking change comes from [41602] / #41614. At that time, the !important made the declaration conflict with the desired styling within the Customizer. Instead of adding CSS to fix this, seems to me it's better to remove the declaration. The necessary margin is already inherited from the desktop view styles.

Some quick testing of 46941.3.diff​ would be nice :) Please also check the widgets panel in the Customizer.

[audrasjb]

46941.3.diff

[audrasjb]

Alright @afercia , I tested 46941.3.diff (see animated screenshot above) and it's even better 👍

[mukesh27]

@afercia 46941.3.diff​ patch works fine for me also.

[afercia]

In 46028:

Widgets: Fix "jumpiness" when reordering widgets by dragging them.

Props ketanumretiya030, mukesh27, andraganescu, audrasjb.
Fixes #46941.