fix: collection collapses on tab/group drag

entrypoints/sidepanel/components/CollectionView.styles.ts

@@ -84,15 +84,11 @@ export const useStyles_CollectionView = makeStyles({
 		"& > div":
 		{
 			pointerEvents: "none"
-		},
+		}
-		height: "54px",
-		overflow: "hidden"
 	},
 	sorting:
 	{
-		pointerEvents: "none",
+		pointerEvents: "none"
-		height: "54px",
-		overflow: "hidden"
 	},
 	dragging:
 	{

entrypoints/sidepanel/components/CollectionView.tsx

@@ -50,26 +50,30 @@ export default function CollectionView({ collection, index: collectionIndex, dra
 
 				<CollectionHeader dragHandleProps={ activatorProps } dragHandleRef={ setActivatorNodeRef } />
 
-				{ collection.items.length < 1 ?
+				{ (!activeItem || activeItem.item.type !== "collection") && !dragOverlay &&
-					<div className={ cls.empty }>
+					<>
-						<CollectionsRegular fontSize={ 32 } />
+						{ collection.items.length < 1 ?
-						<Body1Strong>{ i18n.t("collections.empty") }</Body1Strong>
+							<div className={ cls.empty }>
-					</div>
+								<CollectionsRegular fontSize={ 32 } />
-					:
+								<Body1Strong>{ i18n.t("collections.empty") }</Body1Strong>
-					<div className={ mergeClasses(cls.list, !tilesView && cls.verticalList) }>
+							</div>
-						<SortableContext
+							:
-							items={ collection.items.map((_, index) => [collectionIndex, index].join("/")) }
+							<div className={ mergeClasses(cls.list, !tilesView && cls.verticalList) }>
-							strategy={ tilesView ? horizontalListSortingStrategy : verticalListSortingStrategy }
+								<SortableContext
-						>
+									items={ collection.items.map((_, index) => [collectionIndex, index].join("/")) }
-							{ collection.items.map((i, index) =>
+									strategy={ tilesView ? horizontalListSortingStrategy : verticalListSortingStrategy }
-								i.type === "group" ?
+								>
-									<GroupView
+									{ collection.items.map((i, index) =>
-										key={ index } group={ i } indices={ [collectionIndex, index] } />
+										i.type === "group" ?
-									:
+											<GroupView
-									<TabView key={ index } tab={ i } indices={ [collectionIndex, index] } />
+												key={ index } group={ i } indices={ [collectionIndex, index] } />
-							) }
+											:
-						</SortableContext>
+											<TabView key={ index } tab={ i } indices={ [collectionIndex, index] } />
-					</div>
+									) }
+								</SortableContext>
+							</div>
+						}
+					</>
 				}
 			</div >
 		</CollectionContext.Provider>