fix: relation picker should not move once openened (#8026)

Fixes: #7959 

### Problem
- When searching in the dropdown, the results list would shrink based on
matching items
- This dynamic height change caused the dropdown to flip its position on
each keystroke

### Solution
- Added ```hasMinHeight``` as optional props to the
```DropdownMenuItemsContainer``` to maintain consistent height
- This prevents unwanted position recalculations and flipping while user
types
- The dropdown now stays in its initial position throughout the search
interaction

[Screencast from 2024-10-24
15-43-03.webm](https://github.com/user-attachments/assets/741317b7-fc5e-4874-8221-aa626a1a1747)

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

@@ -113,7 +113,7 @@ export const MultiRecordSelect = ({
           autoFocus
         />
         <DropdownMenuSeparator />
-        <DropdownMenuItemsContainer hasMaxHeight>
+        <DropdownMenuItemsContainer hasMaxHeight hasMinHeight>
           {recordMultiSelectIsLoading ? (
             <MenuItem text="Loading..." />
           ) : (

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
+  hasMinHeight?: boolean;
   hasMaxHeight?: boolean;
 }>`
   --padding: ${({ theme }) => theme.spacing(1)};
@@ -12,7 +13,7 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
 
   flex-direction: column;
   gap: 2px;
-  height: 100%;
+  min-height: ${({ hasMinHeight }) => (hasMinHeight ? '150px' : '100%')};
   max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '188px' : 'none')};
   overflow-y: auto;
 
@@ -37,13 +38,18 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
 
 export const DropdownMenuItemsContainer = ({
   children,
+  hasMinHeight,
   hasMaxHeight,
 }: {
   children: React.ReactNode;
+  hasMinHeight?: boolean;
   hasMaxHeight?: boolean;
 }) => {
   return (
-    <StyledDropdownMenuItemsExternalContainer hasMaxHeight={hasMaxHeight}>
+    <StyledDropdownMenuItemsExternalContainer
+      hasMaxHeight={hasMaxHeight}
+      hasMinHeight={hasMinHeight}
+    >
       {hasMaxHeight ? (
         <StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
           <StyledDropdownMenuItemsInternalContainer>