From 2d000aee0d3a88d90becfed0284d14306efaad72 Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <ee23btech11019@iith.ac.in>
Date: Fri, 19 Jul 2024 18:29:39 +0530
Subject: [PATCH 1/2] fixes strange behaviour while reordering options of a
 select field

---
 .../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 d23690fc3ff3..cc4328852c01 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
@@ -225,6 +225,7 @@ export const SettingsDataModelFieldSelectForm = ({
                   <>
                     {options.map((option, index) => (
                       <DraggableItem
+                        isInsideScrollableContainer={true}
                         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 c5e8e3a3278e..2bcaccdb7460 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,',

From 290480c88bcafc86084dde71205c887ee1e3c568 Mon Sep 17 00:00:00 2001
From: Marie Stoppa <marie.stoppa@essec.edu>
Date: Mon, 22 Jul 2024 14:10:31 +0200
Subject: [PATCH 2/2] Use props declaration shortcut

---
 .../select/components/SettingsDataModelFieldSelectForm.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 cc4328852c01..6db4a553684a 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
@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
+import { useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 import { Key } from 'ts-key-enum';
 import { IconPlus } from 'twenty-ui';
 import { z } from 'zod';
@@ -225,7 +225,7 @@ export const SettingsDataModelFieldSelectForm = ({
                   <>
                     {options.map((option, index) => (
                       <DraggableItem
-                        isInsideScrollableContainer={true}
+                        isInsideScrollableContainer
                         key={option.id}
                         draggableId={option.id}
                         index={index}