#3468049: Cannot place or drag child components

Closes #3468049

The front-end initiates the sorting, hover, click functionality of children (children of slots) using the sortable-list class. In the backend, the sortable-list was only getting added at the root level, but not for any slots so that's why we weren't able to drag any of the nested components. And the existence of the sortable-list was the reason why dragging nested component worked in the mock data but not in the live data.

// Viewport.tsx (the logic for initiating the sorting,hover,click functionality)
const sortableLists = iframeDocumentRef.current.querySelectorAll<HTMLElement>('.sortable-list',);
sortableLists.forEach((sortableList) => {
   const draggableItems =sortableList.querySelectorAll<HTMLElement>('.sortable-item');
   initSortableList(sortableList);
    draggableItems.forEach((item) => {
        initSortableListItem(item);
        initComponentHover(item);
        initComponentClick(item);
    });
});

So the solution is to add a div wrapper with the sortable-list class to any slots as a part of wrapComponentsForPreview()