Fixes: relation settings design + workflow input border (#19269)

Before 

<img width="450" height="172" alt="Capture d’écran 2026-04-02 à 15 57
06"
src="https://github.com/user-attachments/assets/1b2c3f56-f696-407d-a00f-ae567842dbfc"
/>
<img width="450" height="172" alt="Capture d’écran 2026-04-02 à 15 57
22"
src="https://github.com/user-attachments/assets/51ee6db8-0974-46e1-a65f-25fb8aef7126"
/>

After

<img width="450" height="172" alt="Capture d’écran 2026-04-02 à 15 56
38"
src="https://github.com/user-attachments/assets/4843c36c-3c04-4c5a-b2dc-f48b02c9a907"
/>
<img width="450" height="172" alt="Capture d’écran 2026-04-02 à 15 56
58"
src="https://github.com/user-attachments/assets/ec404b4d-6c37-4694-a68c-63f98cdf7388"
/>
This commit is contained in:
Thomas Trompette
2026-04-02 17:43:35 +02:00
committed by GitHub
parent 7f2b853ae1
commit 779e613df3
3 changed files with 25 additions and 47 deletions
@@ -1,4 +1,3 @@
import { t } from '@lingui/core/macro';
import { FormFieldInputContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputContainer';
import { FormFieldInputInnerContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer';
import { FormFieldInputRowContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer';
@@ -8,26 +7,15 @@ import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputHint } from '@/ui/input/components/InputHint';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { t } from '@lingui/core/macro';
import isEmpty from 'lodash.isempty';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import {
canBeCastAsNumberOrNull,
castAsNumberOrNull,
} from '~/utils/cast-as-number-or-null';
import { styled } from '@linaria/react';
const StyledInputWrapper = styled.div`
align-items: center;
display: flex;
& input {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
}
`;
type FormNumberFieldInputProps = {
label?: string;
defaultValue: number | string | undefined;
@@ -120,20 +108,18 @@ export const FormNumberFieldInput = ({
onBlur={onBlur}
>
{draftValue.type === 'static' ? (
<StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={
isDefined(placeholder) && !isEmpty(placeholder)
? placeholder
: t`Enter a number`
}
value={draftValue.value}
copyButton={false}
onChange={handleChange}
disabled={readonly}
/>
</StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={
isDefined(placeholder) && !isEmpty(placeholder)
? placeholder
: t`Enter a number`
}
value={draftValue.value}
copyButton={false}
onChange={handleChange}
disabled={readonly}
/>
) : (
<VariableChipStandalone
rawVariableName={draftValue.value}
@@ -1,4 +1,3 @@
import { t } from '@lingui/core/macro';
import { FormFieldInputContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputContainer';
import { FormFieldInputInnerContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer';
import { FormFieldInputRowContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer';
@@ -7,16 +6,9 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledInputWrapper = styled.div`
& input {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
}
`;
type FormUuidFieldInputProps = {
label?: string;
@@ -103,16 +95,14 @@ export const FormUuidFieldInput = ({
hasRightElement={isDefined(VariablePicker) && !readonly}
>
{draftValue.type === 'static' ? (
<StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={placeholder ?? t`Enter a UUID`}
value={draftValue.value}
copyButton={false}
disabled={readonly}
onChange={handleChange}
/>
</StyledInputWrapper>
<TextInput
instanceId={instanceId}
placeholder={placeholder ?? t`Enter a UUID`}
value={draftValue.value}
copyButton={false}
disabled={readonly}
onChange={handleChange}
/>
) : (
<VariableChipStandalone
rawVariableName={draftValue.value}
@@ -22,7 +22,9 @@ export type SettingsDataModelRelationFieldPreviewSubWidgetProps = {
};
const StyledCardContainer = styled.div`
margin: auto;
display: flex;
flex: 1 1 0;
min-width: 0;
> * {
border-radius: ${themeCssVariables.border.radius.md};