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` : css`
border-right: none; border-right: none;
border-bottom-right-radius: none; border-bottom-right-radius: 0;
border-top-right-radius: none; border-top-right-radius: 0;
`} `}
box-sizing: border-box; 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} ) : null}
</FormFieldInputRowContainer> </FormFieldInputRowContainer>
{hint && <InputHint>{hint}</InputHint>} {hint && <InputHint>{hint}</InputHint>}
<InputErrorHelper>{error}</InputErrorHelper> {error && <InputErrorHelper>{error}</InputErrorHelper>}
</FormFieldInputContainer> </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 { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { InputLabel } from '@/ui/input/components/InputLabel'; import { InputLabel } from '@/ui/input/components/InputLabel';
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { css } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useState } from 'react'; import { useState } from 'react';
import { IconTrash } from 'twenty-ui/display'; import { IconTrash } from 'twenty-ui/display';
@ -14,21 +15,18 @@ const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledRow = styled.div` const StyledKeyValueContainer = styled.div<{ readonly: boolean | undefined }>`
align-items: flex-start; display: grid;
display: flex;
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledKeyValueContainer = styled.div` ${({ readonly, theme }) =>
display: flex; readonly
flex: 1; ? css`
gap: ${({ theme }) => theme.spacing(2)}; grid-template-columns: repeat(2, minmax(0, 1fr));
`; `
: css`
const StyledPlaceholder = styled.div` grid-template-columns: repeat(2, minmax(0, 1fr)) ${theme.spacing(8)};
aspect-ratio: 1; `};
height: ${({ theme }) => theme.spacing(8)};
`; `;
export type KeyValuePair = { export type KeyValuePair = {
@ -122,8 +120,7 @@ export const KeyValuePairInput = ({
{label && <InputLabel>{label}</InputLabel>} {label && <InputLabel>{label}</InputLabel>}
<StyledContainer> <StyledContainer>
{pairs.map((pair) => ( {pairs.map((pair) => (
<StyledRow key={pair.id}> <StyledKeyValueContainer key={pair.id} readonly={readonly}>
<StyledKeyValueContainer>
<FormTextFieldInput <FormTextFieldInput
placeholder={keyPlaceholder} placeholder={keyPlaceholder}
readonly={readonly} readonly={readonly}
@ -133,6 +130,7 @@ export const KeyValuePairInput = ({
} }
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}
/> />
<FormTextFieldInput <FormTextFieldInput
placeholder={valuePlaceholder} placeholder={valuePlaceholder}
readonly={readonly} readonly={readonly}
@ -142,16 +140,14 @@ export const KeyValuePairInput = ({
} }
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}
/> />
{!readonly && pair.id !== pairs[pairs.length - 1].id ? ( {!readonly && pair.id !== pairs[pairs.length - 1].id ? (
<Button <Button
onClick={() => handleRemovePair(pair.id)} onClick={() => handleRemovePair(pair.id)}
Icon={IconTrash} Icon={IconTrash}
/> />
) : pairs.length > 1 ? (
<StyledPlaceholder />
) : null} ) : null}
</StyledKeyValueContainer> </StyledKeyValueContainer>
</StyledRow>
))} ))}
</StyledContainer> </StyledContainer>
</FormFieldInputContainer> </FormFieldInputContainer>