Retain the space consumed by a component when it's being dragged

This is a really nice improvement! Thank you @gauravvvv!

I think this is indeed a clear improvement:

Assigning to @balintbrews for final review 😄

This looks amazing! 🤩

I added a small commit to address two minor things:

1. Increase contrast between ghost element and already placed elements by slightly decreasing opacity;
2. Set a minimum height for the ghost element to account for newly added components where we won't have any markup rendered yet and all we have is a placeholder.

What would be nice, and I couldn't quickly find the selector for it, is to hide the name of a newly added component inside the ghost element. See on my screen capture. @gauravvvv, would you be up for taking a stab at that? If we can't easily make it happen, let's center that element inside the ghost wrapper for now, so it looks like it's intentionally there. You can do that by adding:

.sortable-ghost {
  /* ... */
  display: flex;
  justify-content: center;
  align-items: center;
}

I'm wondering if we should just land this regardless of #8? I think we need a follow-up to improve the design for the scenario where a new component is being added anyway because I think we can improve it further than what's proposed in #8.

@lauriii, sure, that's why I proposed the fallback solution that makes things better immediately. 🙂 Let me push that commit quickly, then we can wrap this up.

This looks good! We probably need couple more issues to further refine this but this is a big step forward 👍

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