Skip to content

Commit 34ce1cf

Browse files
authored
chore: prevent tall steps from blocking other steps (#1229)
## Problem * Template step would block other steps when being dragged ## Bugfix Extra padding causing a gap between the screen and the scrollbar ## Solution * Use `verticalListSortingStrategy`, which is a sorting strategy optimized for vertical lists (supports virtualized lists). verticalListSortingStrategy computes transforms for vertical lists and is intended for use as the strategy prop on SortableContext. It’s optimized for single-column vertical layouts and supports virtualized lists (use instead of the default rectSortingStrategy when rendering long or virtualized vertical lists). ## Before & After Screenshots **BEFO <img width="1512" height="812" alt="Screenshot 2025-09-23 at 6 24 10 PM" src="https://github.com/user-attachments/assets/38a13653-ea74-461a-a298-e755805b6257" /> RE**: **AFTER**: <img width="1920" height="961" alt="Screenshot 2025-09-23 at 6 39 14 PM" src="https://github.com/user-attachments/assets/68f4458c-a772-4cf6-9bf6-b40a082452c0" /> ## Tests - [ ] Reordering steps still work as intended
1 parent 17fb869 commit 34ce1cf

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

packages/frontend/src/components/Editor/styles.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export const editorStyles = {
88
overflowX: 'hidden' as FlexProps['overflowX'],
99
justifyContent: 'center',
1010
pos: 'relative' as FlexProps['pos'],
11-
paddingX: 4,
1211
},
1312
stepHeaderContainer: {
1413
display: 'block',

packages/frontend/src/components/SortableList/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
arrayMove,
2020
SortableContext,
2121
sortableKeyboardCoordinates,
22+
verticalListSortingStrategy,
2223
} from '@dnd-kit/sortable'
2324

2425
import { DragHandle, SortableItem, SortableOverlay } from './components'
@@ -77,7 +78,7 @@ export function SortableList<T extends BaseItem>({
7778
restrictToWindowEdges,
7879
]}
7980
>
80-
<SortableContext items={items}>
81+
<SortableContext items={items} strategy={verticalListSortingStrategy}>
8182
<ul className="SortableList" role="application">
8283
{items.map((item) => (
8384
<React.Fragment key={item.id}>

0 commit comments

Comments
 (0)