Fix form date time field right border when variable picker is provided and field is readonly (#9600)

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx

@@ -333,7 +333,7 @@ export const FormDateTimeFieldInput = ({
       <FormFieldInputRowContainer>
         <StyledInputContainer
           ref={datePickerWrapperRef}
-          hasRightElement={isDefined(VariablePicker)}
+          hasRightElement={isDefined(VariablePicker) && !readonly}
         >
           {draftValue.type === 'static' ? (
             <>

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx

@@ -396,6 +396,17 @@ export const DisabledWithVariable: Story = {
     defaultValue: `{{a.b.c}}`,
     onPersist: fn(),
     readonly: true,
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect('{{test}}');
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx

@@ -427,6 +427,17 @@ export const DisabledWithVariable: Story = {
     defaultValue: `{{a.b.c}}`,
     onPersist: fn(),
     readonly: true,
+    VariablePicker: ({ onVariableSelect }) => {
+      return (
+        <button
+          onClick={() => {
+            onVariableSelect('{{test}}');
+          }}
+        >
+          Add variable
+        </button>
+      );
+    },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);