fix: workspace list dnd issues (#4219)

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

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} />