From 4719fe6ed9af7052e4df9a3cddc25ccdd3068db4 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 14 Jan 2025 13:58:52 +0100
Subject: [PATCH] Fix form date time field right border when variable picker is
 provided and field is readonly (#9600)

---
 .../form-types/components/FormDateTimeFieldInput.tsx  |  2 +-
 .../__stories__/FormDateFieldInput.stories.tsx        | 11 +++++++++++
 .../__stories__/FormDateTimeFieldInput.stories.tsx    | 11 +++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
index 909c2f033..bb80b458f 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
+++ b/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' ? (
             <>
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx
index 100c2ecc8..d952e3a7c 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx
+++ b/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);
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx
index fdf84ff6f..73f8f2925 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx
+++ b/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);