From 0e01ddf7f93c24b54f58933217020af81d86e5d0 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Wed, 9 Oct 2024 21:46:44 +0530
Subject: [PATCH] fix: Relation picker UX improvements (#7292)

Closes https://github.com/twentyhq/twenty/issues/7287

> [!Note]
> This PR solves the issue #7287
> Updated margins between button and seperator and gave seperator full
width

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/MultiRecordSelect.tsx            | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
index f325edecc..266defb44 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
@@ -23,6 +23,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { IconPlus, isDefined } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
+
 export const StyledSelectableItem = styled(SelectableItem)`
   height: 100%;
   width: 100%;
@@ -144,19 +145,19 @@ export const MultiRecordSelect = ({
               )}
             </>
           )}
-          {isDefined(onCreate) && (
-            <>
-              {objectRecordsIdsMultiSelect.length > 0 && (
-                <DropdownMenuSeparator />
-              )}
+        </DropdownMenuItemsContainer>
+        {isDefined(onCreate) && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItemsContainer>
               <CreateNewButton
                 onClick={debouncedOnCreate}
                 LeftIcon={IconPlus}
                 text="Add New"
               />
-            </>
-          )}
-        </DropdownMenuItemsContainer>
+            </DropdownMenuItemsContainer>
+          </>
+        )}
       </DropdownMenu>
     </>
   );