From 6d7782eb5a7d8ba421a207a82148b623430c396e Mon Sep 17 00:00:00 2001
From: marteenaf <120792086+marteenaf@users.noreply.github.com>
Date: Tue, 11 Jun 2024 17:24:40 +0100
Subject: [PATCH] Align field values with fixed width for field key.  (#5821)

Made the alignment consistent with the field panel. This uses 90px as
the key label width.

**Issue:** #5730

**Changes:**
- Add a label width of 90 to FieldContext Provider in useFieldContext
function
- Add a label width of 90 to ActivityTargetsInlineCell component

**Screen recording form local testing:**



https://github.com/twentyhq/twenty/assets/120792086/e150530b-4163-4a69-9bd5-119a2f202d4f

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
---
 .../inline-cell/components/ActivityTargetsInlineCell.tsx     | 5 +++++
 .../src/modules/object-record/hooks/useFieldContext.tsx      | 1 +
 2 files changed, 6 insertions(+)

diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
index 7971a5a8f8..2755acefd1 100644
--- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
+++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { Key } from 'ts-key-enum';
 import { IconArrowUpRight, IconPencil } from 'twenty-ui';
 
@@ -6,6 +7,7 @@ import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTa
 import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
 import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
 import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
@@ -29,6 +31,8 @@ export const ActivityTargetsInlineCell = ({
     useActivityTargetObjectRecords(activity);
   const { closeInlineCell } = useInlineCell();
 
+  const { fieldDefinition } = useContext(FieldContext);
+
   useScopedHotkeys(
     Key.Escape,
     () => {
@@ -48,6 +52,7 @@ export const ActivityTargetsInlineCell = ({
           IconLabel={showLabel ? IconArrowUpRight : undefined}
           showLabel={showLabel}
           readonly={readonly}
+          labelWidth={fieldDefinition?.labelWidth}
           editModeContent={
             <ActivityTargetInlineCellEditMode
               activity={activity}
diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx b/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
index 84095a3417..cbd002af74 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
+++ b/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
@@ -72,6 +72,7 @@ export const useFieldContext = ({
                 showLabel: true,
                 position: fieldPosition,
                 objectMetadataItem,
+                labelWidth: 90,
               }),
               useUpdateRecord:
                 customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation,