From 4cfb6a9118b5330b02e3dc0dd94099359836c482 Mon Sep 17 00:00:00 2001
From: ousugo <dkzyxh@gmail.com>
Date: Tue, 18 Feb 2025 14:27:47 +0800
Subject: [PATCH] fix: Improve DragableList component styling and placeholder
 handling

---
 src/renderer/src/components/DragableList/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/DragableList/index.tsx b/src/renderer/src/components/DragableList/index.tsx
index 6be5dcd641..5d9acc9429 100644
--- a/src/renderer/src/components/DragableList/index.tsx
+++ b/src/renderer/src/components/DragableList/index.tsx
@@ -46,23 +46,28 @@ const DragableList: FC<Props<any>> = ({
     <DragDropContext onDragStart={onDragStart} onDragEnd={_onDragEnd}>
       <Droppable droppableId="droppable" {...droppableProps}>
         {(provided) => (
-          <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...style }}>
+          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
             {list.map((item, index) => {
               const id = item.id || item
               return (
-                <Draggable key={`draggable_${id}_${index}`} draggableId={id} index={index} {...droppableProps}>
-                  {(provided) => (
+                <Draggable key={`draggable_${id}_${index}`} draggableId={id} index={index}>
+                  {(provided, snapshot) => (
                     <div
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
-                      style={{ ...provided.draggableProps.style, marginBottom: 8, ...listStyle }}>
+                      style={{
+                        ...listStyle,
+                        ...provided.draggableProps.style,
+                        marginBottom: index === list.length - 1 && !snapshot.isDragging ? 0 : 8
+                      }}>
                       {children(item, index)}
                     </div>
                   )}
                 </Draggable>
               )
             })}
+            {provided.placeholder}
           </div>
         )}
       </Droppable>