diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
index b93e545dd..925364684 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
+++ b/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 }>`
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
index 18f620326..9a549fe10 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
+++ b/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}
/>
)}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
index 43fe62ce0..fc698308e 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
+++ b/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) }}
/>
) : (
}
dropdownHotkeyScope={{ scope: dropdownId }}
diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
index 15c0d14c7..dc50997aa 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
+++ b/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(null);
@@ -49,7 +51,7 @@ export const SingleRecordPicker = ({
-
+
void;
options: SelectOption[];
onOptionSelected: (value: FieldMultiSelectValue) => void;
+ dropdownWidth?: number;
};
export const MultiSelectInput = ({
@@ -34,6 +35,7 @@ export const MultiSelectInput = ({
hotkeyScope,
onCancel,
onOptionSelected,
+ dropdownWidth,
}: MultiSelectInputProps) => {
const { resetSelectedItem } = useSelectableList(
selectableListComponentInstanceId,
@@ -102,7 +104,11 @@ export const MultiSelectInput = ({
selectableItemIdArray={optionIds}
hotkeyScope={hotkeyScope}
>
-
+
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
index 3da95a415..8bf20ab16 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
@@ -16,6 +16,8 @@ import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useTheme } from '@emotion/react';
type WorkflowEditActionCreateRecordProps = {
action: WorkflowCreateRecordAction;
@@ -57,6 +59,8 @@ export const WorkflowEditActionCreateRecord = ({
action,
actionOptions,
}: WorkflowEditActionCreateRecordProps) => {
+ const theme = useTheme();
+
const { getIcon } = useIcons();
const { activeNonSystemObjectMetadataItems } =
@@ -201,6 +205,8 @@ export const WorkflowEditActionCreateRecord = ({
saveAction(newFormData);
}}
withSearchInput
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
index 635c72a92..d26614c15 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
@@ -13,6 +13,8 @@ import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useTheme } from '@emotion/react';
type WorkflowEditActionDeleteRecordProps = {
action: WorkflowDeleteRecordAction;
@@ -35,6 +37,8 @@ export const WorkflowEditActionDeleteRecord = ({
action,
actionOptions,
}: WorkflowEditActionDeleteRecordProps) => {
+ const theme = useTheme();
+
const { getIcon } = useIcons();
const { activeNonSystemObjectMetadataItems } =
@@ -147,6 +151,8 @@ export const WorkflowEditActionDeleteRecord = ({
saveAction(newFormData);
}}
withSearchInput
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
index 1b5dd6ed0..e2e0ef65f 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
@@ -24,6 +24,8 @@ import { SelectOption } from 'twenty-ui/input';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { useTheme } from '@emotion/react';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowEditActionSendEmailProps = {
action: WorkflowSendEmailAction;
@@ -48,6 +50,7 @@ export const WorkflowEditActionSendEmail = ({
action,
actionOptions,
}: WorkflowEditActionSendEmailProps) => {
+ const theme = useTheme();
const { getIcon } = useIcons();
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { triggerApisOAuth } = useTriggerApisOAuth();
@@ -244,6 +247,8 @@ export const WorkflowEditActionSendEmail = ({
handleFieldChange('connectedAccountId', connectedAccountId);
}}
disabled={actionOptions.readonly}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
{
+ const theme = useTheme();
+
const { getIcon } = useIcons();
const { activeNonSystemObjectMetadataItems } =
@@ -184,6 +188,8 @@ export const WorkflowEditActionUpdateRecord = ({
saveAction(newFormData);
}}
withSearchInput
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
index 0618ea4b0..d5ac0b488 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
@@ -9,6 +9,8 @@ import styled from '@emotion/styled';
import camelCase from 'lodash.camelcase';
import { useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useTheme } from '@emotion/react';
type WorkflowFormFieldSettingsRecordPickerProps = {
field: WorkflowFormActionField;
@@ -25,6 +27,8 @@ export const WorkflowFormFieldSettingsRecordPicker = ({
field,
onChange,
}: WorkflowFormFieldSettingsRecordPickerProps) => {
+ const theme = useTheme();
+
const { getIcon } = useIcons();
const { activeNonSystemObjectMetadataItems } =
@@ -62,6 +66,8 @@ export const WorkflowFormFieldSettingsRecordPicker = ({
});
}}
withSearchInput
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
index 5c39637e0..4af4dcbb6 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
@@ -18,6 +18,8 @@ import { useHttpRequestForm } from '../hooks/useHttpRequestForm';
import { useHttpRequestOutputSchema } from '../hooks/useHttpRequestOutputSchema';
import { BodyInput } from './BodyInput';
import { KeyValuePairInput } from './KeyValuePairInput';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useTheme } from '@emotion/react';
type WorkflowEditActionHttpRequestProps = {
action: WorkflowHttpRequestAction;
@@ -31,6 +33,7 @@ export const WorkflowEditActionHttpRequest = ({
action,
actionOptions,
}: WorkflowEditActionHttpRequestProps) => {
+ const theme = useTheme();
const { getIcon } = useIcons();
const { headerTitle, headerIcon, headerIconColor, headerType } =
useWorkflowActionHeader({
@@ -84,6 +87,8 @@ export const WorkflowEditActionHttpRequest = ({
value={formData.method}
onChange={(value) => handleFieldChange('method', value)}
disabled={actionOptions.readonly}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
{trigger.settings.type === 'CUSTOM' && (
theme.font.color.light};
@@ -200,7 +201,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
<>
{!triggerOptions.readonly &&
(isSystemObjectsOpen ? (
-
+
) : (
-
+
}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
/>
{isDefined(selectedObjectMetadataItem) && isUpdateEvent && (
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
index b4c16fd36..7d3cf5e5a 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
@@ -15,6 +15,7 @@ import { useTheme } from '@emotion/react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowEditTriggerManualFormProps = {
trigger: WorkflowManualTrigger;
@@ -96,6 +97,8 @@ export const WorkflowEditTriggerManualForm = ({
}),
});
}}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
{manualTriggerAvailability === 'WHEN_RECORD_SELECTED' ? (
@@ -119,6 +122,8 @@ export const WorkflowEditTriggerManualForm = ({
},
});
}}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
) : null}
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx
index 846cf585f..974c4df4c 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx
@@ -24,6 +24,7 @@ import { isDefined } from 'twenty-shared/utils';
import { IconCopy, useIcons } from 'twenty-ui/display';
import { useDebouncedCallback } from 'use-debounce';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowEditTriggerWebhookFormProps = {
trigger: WorkflowWebhookTrigger;
@@ -138,6 +139,8 @@ export const WorkflowEditTriggerWebhookForm = ({
{ computeOutputSchema: false },
);
}}
+ dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+ dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
{trigger.settings.httpMethod === 'POST' && (
);
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
index 957abebb3..4da56bf26 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
@@ -37,11 +37,13 @@ export const WorkflowVariablesDropdown = ({
onVariableSelect,
disabled,
objectNameSingularToSelect,
+ multiline,
}: {
inputId: string;
onVariableSelect: (variableName: string) => void;
disabled?: boolean;
objectNameSingularToSelect?: string;
+ multiline?: boolean;
}) => {
const theme = useTheme();
@@ -132,7 +134,10 @@ export const WorkflowVariablesDropdown = ({
)
}
dropdownPlacement="bottom-end"
- dropdownOffset={{ x: 2, y: 4 }}
+ dropdownOffset={{
+ x: parseInt(theme.spacing(0.5), 10),
+ y: parseInt(theme.spacing(multiline ? 11 : 1), 10),
+ }}
/>
);
};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
index f44609545..0fcd0ebcf 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
@@ -27,6 +27,7 @@ import {
useIcons,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowVariablesDropdownFieldItemsProps = {
step: StepOutputSchema;
@@ -118,7 +119,7 @@ export const WorkflowVariablesDropdownFieldItems = ({
: options;
return (
-
+
+
+