From 779e613df39b68334d03506eaa87faef2d94729e Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 2 Apr 2026 17:43:35 +0200
Subject: [PATCH] Fixes: relation settings design + workflow input border
 (#19269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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"
/>
---
 .../components/FormNumberFieldInput.tsx       | 40 ++++++-------------
 .../components/FormUuidFieldInput.tsx         | 28 +++++--------
 ...DataModelRelationFieldPreviewSubWidget.tsx |  4 +-
 3 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx
index 0cc37da78c..979732eafd 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx
@@ -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}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx
index a4b73e8783..577ebf7018 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx
@@ -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}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
index 080e397621..04c26093d6 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx
@@ -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};