fix: workspace list dnd issues (#4219)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/package.json

@@ -21,6 +21,7 @@
     "@affine/jotai": "workspace:*",
     "@affine/workspace": "workspace:*",
     "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",

packages/component/src/components/card/workspace-card/styles.ts

@@ -47,7 +47,6 @@ export const StyledCard = styled('div')<{
     borderRadius: '12px',
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),
-    marginBottom: '12px',
     transition: 'background .2s',
     alignItems: 'center',
     position: 'relative',

packages/component/src/components/workspace-list/index.tsx

@@ -10,6 +10,10 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
+import {
+  restrictToParentElement,
+  restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import type { CSSProperties } from 'react';
 import { useMemo } from 'react';
@@ -63,6 +67,8 @@ const SortableWorkspaceItem = (props: SortableWorkspaceItemProps) => {
   );
 };
 
+const modifiers = [restrictToParentElement, restrictToVerticalAxis];
+
 export const WorkspaceList = (props: WorkspaceListProps) => {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -72,7 +78,11 @@ export const WorkspaceList = (props: WorkspaceListProps) => {
     })
   );
   return (
-    <DndContext sensors={sensors} onDragEnd={props.onDragEnd}>
+    <DndContext
+      sensors={sensors}
+      onDragEnd={props.onDragEnd}
+      modifiers={modifiers}
+    >
       <SortableContext items={props.items}>
         {props.items.map(item => (
           <SortableWorkspaceItem {...props} item={item} key={item.id} />

yarn.lock

@@ -175,6 +175,7 @@ __metadata:
     "@blocksuite/lit": 0.0.0-20230905170607-94acf22c-nightly
     "@blocksuite/store": 0.0.0-20230905170607-94acf22c-nightly
     "@dnd-kit/core": ^6.0.8
+    "@dnd-kit/modifiers": ^6.0.1
     "@dnd-kit/sortable": ^7.0.2
     "@emotion/cache": ^11.11.0
     "@emotion/react": ^11.11.1
@@ -3952,6 +3953,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnd-kit/modifiers@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@dnd-kit/modifiers@npm:6.0.1"
+  dependencies:
+    "@dnd-kit/utilities": ^3.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@dnd-kit/core": ^6.0.6
+    react: ">=16.8.0"
+  checksum: cd31715aac81baa2398558dc7c877a483d1c4c41cdb2f466557fdc41bb742db5cd1b34b3b84332b94ac4a2835e7e5a0e28c64e621936e976399788f1dd029ea4
+  languageName: node
+  linkType: hard
+
 "@dnd-kit/sortable@npm:^7.0.2":
   version: 7.0.2
   resolution: "@dnd-kit/sortable@npm:7.0.2"