I'm currently working on a scheduling calendar that allows users to book time slots and easily drag and drop them to adjust the time. Each time slot is represented as a draggable HTML element. However, I've noticed a problem where the preview image (or ghost image) displayed when dragging small slots partially shows adjacent slots. In the example image below, you can see how dragging the first slot displays part of the second slot in the preview.
My theory is that the size of the ghost image may be controlled by a min-height property. Any suggestions on how to address this issue would be greatly appreciated!