admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Remove white gap in workflow HTTP headers input field (#12812)

Browse Source 
Closes #12751 

<img width="500" alt="Screenshot 2025-06-24 at 3 39 33 PM"
src="https://github.com/user-attachments/assets/a7b28fcb-8ba4-40c8-872e-8de8ce5286be"
/>

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
This commit is contained in:
Abdul Rahman
2025-07-02 22:04:52 +05:30
committed by GitHub
parent 07f75180ae
commit a19a73a977
3 changed files with 41 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx
View File

@ -26,8 +26,8 @@ const StyledFormFieldInputInnerContainer = styled.div<FormFieldInputInnerContain
`
: css`
border-right: none;
border-bottom-right-radius: none;
border-top-right-radius: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
`}
box-sizing: border-box;

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
View File

@ -91,7 +91,7 @@ export const FormTextFieldInput = ({
) : null}
</FormFieldInputRowContainer>
{hint && <InputHint>{hint}</InputHint>}
<InputErrorHelper>{error}</InputErrorHelper>
{error && <InputErrorHelper>{error}</InputErrorHelper>}
</FormFieldInputContainer>
);
};

32
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx
View File

@ -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,8 +120,7 @@ export const KeyValuePairInput = ({
{label && <InputLabel>{label}</InputLabel>}
<StyledContainer>
{pairs.map((pair) => (
<StyledRow key={pair.id}>
<StyledKeyValueContainer>
<StyledKeyValueContainer key={pair.id} readonly={readonly}>
<FormTextFieldInput
placeholder={keyPlaceholder}
readonly={readonly}
@ -133,6 +130,7 @@ export const KeyValuePairInput = ({
}
VariablePicker={WorkflowVariablePicker}
/>
<FormTextFieldInput
placeholder={valuePlaceholder}
readonly={readonly}
@ -142,16 +140,14 @@ export const KeyValuePairInput = ({
}
VariablePicker={WorkflowVariablePicker}
/>
{!readonly && pair.id !== pairs[pairs.length - 1].id ? (
<Button
onClick={() => handleRemovePair(pair.id)}
Icon={IconTrash}
/>
) : pairs.length > 1 ? (
<StyledPlaceholder />
) : null}
</StyledKeyValueContainer>
</StyledRow>
))}
</StyledContainer>
</FormFieldInputContainer>