1031 workflows menu fixes (#12618)

## Before (not exhaustive)
<img width="520" alt="image"
src="https://github.com/user-attachments/assets/642365c5-f359-4ad3-8ba3-d7bb9c7d91e4"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/0819717f-84c6-436c-b9f4-20a1964cd565"
/>
<img width="528" alt="image"
src="https://github.com/user-attachments/assets/240bf181-ec37-4e25-9fdb-c264a680abcc"
/>
<img width="525" alt="image"
src="https://github.com/user-attachments/assets/0dfd55c1-dfbd-47ee-8741-977b5e57fa0a"
/>


## After (not exhaustive)
<img width="511" alt="image"
src="https://github.com/user-attachments/assets/199b6e6e-be1d-4b75-8df6-d65ff05bee58"
/>
<img width="512" alt="image"
src="https://github.com/user-attachments/assets/a92f67a8-ed58-4c4f-b401-07765158030f"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/ba3ae73a-4650-4f7f-a62a-980e6a2d21d1"
/>
<img width="518" alt="image"
src="https://github.com/user-attachments/assets/97946870-4fba-4898-8381-9087df0b9ac4"
/>

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx

@@ -26,13 +26,14 @@ import { Nullable } from 'twenty-ui/utilities';
 const StyledInputContainer = styled(FormFieldInputInnerContainer)`
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 0px;
+  grid-template-rows: 1fr 0;
   overflow: visible;
   position: relative;
 `;
 
 const StyledDateInputAbsoluteContainer = styled.div`
   position: absolute;
+  top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledDateInput = styled.input<{ hasError?: boolean }>`

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx

@@ -21,6 +21,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { VisibilityHidden } from 'twenty-ui/accessibility';
 import { IconChevronDown } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 
 type FormMultiSelectFieldInputProps = {
   label?: string;
@@ -55,7 +56,7 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
 const StyledSelectInputContainer = styled.div`
   position: absolute;
   z-index: 1;
-  top: ${({ theme }) => theme.spacing(8)};
+  top: ${({ theme }) => theme.spacing(9)};
 `;
 
 const StyledPlaceholder = styled.div`
@@ -260,6 +261,7 @@ export const FormMultiSelectFieldInput = ({
                   onCancel={onCancel}
                   onOptionSelected={onOptionSelected}
                   values={selectedNames}
+                  dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
                 />
               </OverlayContainer>
             )}

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

@@ -13,6 +13,8 @@ import { useId, useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
 import { SelectOption } from 'twenty-ui/input';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useTheme } from '@emotion/react';
 
 type FormSelectFieldInputProps = {
   label?: string;
@@ -31,6 +33,8 @@ export const FormSelectFieldInput = ({
   options,
   readonly,
 }: FormSelectFieldInputProps) => {
+  const theme = useTheme();
+
   const inputId = useId();
 
   const hotkeyScope = InlineCellHotkeyScope.InlineCell;
@@ -132,6 +136,8 @@ export const FormSelectFieldInput = ({
             hasRightElement={isDefined(VariablePicker) && !readonly}
             withSearchInput
             disabled={readonly}
+            dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
+            dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
           />
         ) : (
           <FormFieldInputInnerContainer

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx

@@ -18,6 +18,7 @@ import styled from '@emotion/styled';
 import { useCallback, useId } from 'react';
 import { isDefined, isValidUuid } from 'twenty-shared/utils';
 import { IconChevronDown, IconForbid } from 'twenty-ui/display';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 
 const StyledFormSelectContainer = styled(FormFieldInputInnerContainer)<{
   readonly?: boolean;
@@ -165,6 +166,7 @@ export const FormSingleRecordPicker = ({
             clickableComponentWidth={'100%'}
             onClose={handleCloseRelationPickerDropdown}
             onOpen={handleOpenDropdown}
+            dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
             clickableComponent={
               <StyledFormSelectContainer
                 hasRightElement={isDefined(VariablePicker) && !disabled}
@@ -194,6 +196,7 @@ export const FormSingleRecordPicker = ({
                 onRecordSelected={handleRecordSelected}
                 objectNameSingular={objectNameSingular}
                 recordPickerInstanceId={dropdownId}
+                dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
               />
             }
             dropdownHotkeyScope={{ scope: dropdownId }}

packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx

@@ -13,6 +13,7 @@ export const SINGLE_RECORD_PICKER_LISTENER_ID = 'single-record-select';
 
 export type SingleRecordPickerProps = {
   componentInstanceId: string;
+  dropdownWidth?: number;
 } & SingleRecordPickerMenuItemsWithSearchProps;
 
 export const SingleRecordPicker = ({
@@ -25,6 +26,7 @@ export const SingleRecordPicker = ({
   objectNameSingular,
   componentInstanceId,
   layoutDirection,
+  dropdownWidth,
 }: SingleRecordPickerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +51,7 @@ export const SingleRecordPicker = ({
     <SingleRecordPickerComponentInstanceContext.Provider
       value={{ instanceId: componentInstanceId }}
     >
-      <DropdownContent ref={containerRef}>
+      <DropdownContent ref={containerRef} widthInPixels={dropdownWidth}>
         <SingleRecordPickerMenuItemsWithSearch
           {...{
             EmptyIcon,