diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx index ec646f543..8ce867948 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx @@ -26,8 +26,8 @@ const StyledFormFieldInputInnerContainer = styled.div {hint && {hint}} - {error} + {error && {error}} ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx index 3d668ac21..39a1047c9 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx @@ -2,6 +2,7 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; import { IconTrash } from 'twenty-ui/display'; @@ -14,21 +15,18 @@ const StyledContainer = styled.div` gap: ${({ theme }) => theme.spacing(2)}; `; -const StyledRow = styled.div` - align-items: flex-start; - display: flex; +const StyledKeyValueContainer = styled.div<{ readonly: boolean | undefined }>` + display: grid; gap: ${({ theme }) => theme.spacing(2)}; -`; -const StyledKeyValueContainer = styled.div` - display: flex; - flex: 1; - gap: ${({ theme }) => theme.spacing(2)}; -`; - -const StyledPlaceholder = styled.div` - aspect-ratio: 1; - height: ${({ theme }) => theme.spacing(8)}; + ${({ readonly, theme }) => + readonly + ? css` + grid-template-columns: repeat(2, minmax(0, 1fr)); + ` + : css` + grid-template-columns: repeat(2, minmax(0, 1fr)) ${theme.spacing(8)}; + `}; `; export type KeyValuePair = { @@ -122,36 +120,34 @@ export const KeyValuePairInput = ({ {label && {label}} {pairs.map((pair) => ( - - - - handlePairChange(pair.id, 'key', value ?? '') - } - VariablePicker={WorkflowVariablePicker} + + + handlePairChange(pair.id, 'key', value ?? '') + } + VariablePicker={WorkflowVariablePicker} + /> + + + handlePairChange(pair.id, 'value', value ?? '') + } + VariablePicker={WorkflowVariablePicker} + /> + + {!readonly && pair.id !== pairs[pairs.length - 1].id ? ( +