fix(SingleEntitySelectMenuItems): correctly position "Add New" in cas…

…e of an "*end" positioned `dropdownPlacement`

- display is inverted when the `Placement` is at the `end`, following the `MultiRecordSelect` component design
- add a story to display the `end` placement
- pass down the `dropdownPlacement` prop in `SingleEntitySelect`

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx

@@ -15,6 +15,7 @@ export type SingleEntitySelectProps = {
 
 export const SingleEntitySelect = ({
   disableBackgroundBlur = false,
+  dropdownPlacement,
   EmptyIcon,
   emptyLabel,
   excludedRelationRecordIds,
@@ -52,6 +53,7 @@ export const SingleEntitySelect = ({
     >
       <SingleEntitySelectMenuItemsWithSearch
         {...{
+          dropdownPlacement,
           EmptyIcon,
           emptyLabel,
           excludedRelationRecordIds,

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx

@@ -53,13 +53,11 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
     });
 
   const createNewButton = isDefined(onCreate) && (
-    <DropdownMenuItemsContainer>
-      <CreateNewButton
-        onClick={() => onCreate?.(relationPickerSearchFilter)}
-        LeftIcon={IconPlus}
-        text="Add New"
-      />
-    </DropdownMenuItemsContainer>
+    <CreateNewButton
+      onClick={() => onCreate?.(relationPickerSearchFilter)}
+      LeftIcon={IconPlus}
+      text="Add New"
+    />
   );
 
   const results = (
@@ -87,6 +85,10 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
     <>
       {dropdownPlacement?.includes('end') && (
         <>
+          <DropdownMenuItemsContainer>
+            {createNewButton}
+          </DropdownMenuItemsContainer>
+          {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
           {results}
           <DropdownMenuSeparator />
         </>
@@ -97,10 +99,12 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
         <>
           <DropdownMenuSeparator />
           {results}
+          {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
+          <DropdownMenuItemsContainer>
+            {createNewButton}
+          </DropdownMenuItemsContainer>
         </>
       )}
-      {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
-      {createNewButton}
     </>
   );
 };

packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -80,3 +80,7 @@ export const WithSearchFilter: Story = {
     });
   },
 };
+
+export const WithEndPlacement: Story = {
+  args: { dropdownPlacement: 'bottom-end' },
+};