From 284e75791c35b96d7503d37ca0e77993bfede02b Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:03:02 +0530
Subject: [PATCH] Fixes Strange behaviour when reordering options of select
 field (#6103) (#6339)

fixes #6103

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
---
 .../select/components/SettingsDataModelFieldSelectForm.tsx    | 1 +
 .../ui/layout/draggable-list/components/DraggableItem.tsx     | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
index c92bd3c96..9d3c97628 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
@@ -218,6 +218,7 @@ export const SettingsDataModelFieldSelectForm = ({
                   <>
                     {options.map((option, index) => (
                       <DraggableItem
+                        isInsideScrollableContainer
                         key={option.id}
                         draggableId={option.id}
                         index={index}
diff --git a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx
index c5e8e3a32..2bcaccdb7 100644
--- a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx
@@ -7,6 +7,7 @@ type DraggableItemProps = {
   isDragDisabled?: boolean;
   index: number;
   itemComponent: JSX.Element;
+  isInsideScrollableContainer?: boolean;
 };
 
 export const DraggableItem = ({
@@ -14,6 +15,7 @@ export const DraggableItem = ({
   isDragDisabled = false,
   index,
   itemComponent,
+  isInsideScrollableContainer,
 }: DraggableItemProps) => {
   const theme = useTheme();
   return (
@@ -36,7 +38,7 @@ export const DraggableItem = ({
             style={{
               ...draggableStyle,
               left: 'auto',
-              top: 'auto',
+              ...(isInsideScrollableContainer ? {} : { top: 'auto' }),
               transform: draggableStyle?.transform?.replace(
                 /\(-?\d+px,/,
                 '(0,',