Align field values with fixed width for field key. (twentyhq#5821)

Made the alignment consistent with the field panel. This uses 90px as the key label width. **Issue:** twentyhq#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>
hanchchch · Jun 11, 2024 · 6d7782e · 6d7782e
1 parent 3440889
commit 6d7782e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/.../twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx b/.../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
@@ -72,6 +72,7 @@ export const useFieldContext = ({
                 showLabel: true,
                 position: fieldPosition,
                 objectMetadataItem,
+                labelWidth: 90,
               }),
               useUpdateRecord:
                 customUseUpdateOneObjectHook ?? useUpdateOneObjectMutation,