From c721fa8502d5384445570c38353affc8c340b766 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Thu, 21 May 2026 22:29:29 +0200
Subject: [PATCH] Add editor mode for text field widgets (#20779)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Tested ↓

<img width="3456" height="1990" alt="CleanShot 2026-05-20 at 21 14
04@2x"
src="https://github.com/user-attachments/assets/b4e0d3d3-715f-4ad7-bd03-e8e1922b3c6c"
/>


- Enable `FieldDisplayMode.EDITOR` for plain `TEXT` field widgets while
keeping `FIELD` as the default display mode.
- Add a plain multiline text editor renderer for `TEXT + EDITOR` field
widgets with optimistic record-store/cache updates and debounced
persistence.
- Reuse the shared `TextArea` component through a transparent, uncapped
variant so the editor has no input chrome and lets the widget grow.
- Add unit coverage for text display-mode config and a Storybook
scenario for a text field widget in editor mode.

## useEffect cleanup note

`FieldWidgetTextEditor` flushes the debounced persist callback in a
`useEffect` cleanup:

```ts
useEffect(() => () => persistTextDebounced.flush(), [persistTextDebounced]);
```

This follows the existing debounced autosave cleanup pattern already
used in `WorkflowEditActionHttpRequest`. It ensures pending text changes
are persisted when the widget unmounts, while `onBlur` still flushes
immediately for normal editor exits.

## Validation

- `npx nx test twenty-front --testPathPattern=page-layout`
- `npx nx typecheck twenty-front`
- `npx nx lint twenty-front`
- Browser check on
`http://apple.localhost:3001/object/company/20202020-a305-41e7-8c72-ba44072a4c58`
for transparent textarea, no internal max-height/scroll, equal padding,
and widget growth.

Note: lint passes with two unrelated existing warnings in
`NavigationDrawerItem.tsx` and `ConfigVariableEdit.tsx`.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/LogicFunctionLogs.tsx          |    1 +
 .../widgets/field/components/FieldWidget.tsx  |   15 +
 .../components/FieldWidgetTextEditor.tsx      |   97 +
 .../__stories__/FieldWidget.stories.tsx       | 1813 ++++-------------
 .../field/constants/fieldWidgetConfig.ts      |    4 +
 .../getFieldWidgetDisplayModeConfig.test.ts   |   34 +
 .../ConfigVariableDatabaseInput.tsx           |    1 +
 .../SettingsDataModelFieldDescriptionForm.tsx |    1 +
 .../SettingsDataModelObjectAboutForm.tsx      |    1 +
 .../SettingsDevelopersWebhookForm.tsx         |    1 +
 .../SettingsLogicFunctionNewForm.tsx          |    1 +
 .../components/SettingsRoleSettings.tsx       |    1 +
 .../modules/ui/input/components/TextArea.tsx  |   47 +-
 .../__stories__/TextArea.stories.tsx          |   19 +-
 .../pages/settings/ai/SettingsSkillForm.tsx   |    1 +
 .../pages/settings/ai/SettingsToolDetail.tsx  |    1 +
 16 files changed, 568 insertions(+), 1470 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetTextEditor.tsx
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/field/utils/__tests__/getFieldWidgetDisplayModeConfig.test.ts

diff --git a/packages/twenty-front/src/modules/logic-functions/components/LogicFunctionLogs.tsx b/packages/twenty-front/src/modules/logic-functions/components/LogicFunctionLogs.tsx
index e215ad2503..aa1a8fb8d6 100644
--- a/packages/twenty-front/src/modules/logic-functions/components/LogicFunctionLogs.tsx
+++ b/packages/twenty-front/src/modules/logic-functions/components/LogicFunctionLogs.tsx
@@ -29,6 +29,7 @@ export const LogicFunctionLogs = ({
         label={t`Logs`}
         value={value}
         height={height}
+        maxRows={5}
         readOnly
       />
       <ResizeHandle
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
index 171d183379..9255a9e897 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
@@ -4,6 +4,7 @@ import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/uti
 import { isFieldMorphRelation } from '@/object-record/record-field/ui/types/guards/isFieldMorphRelation';
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { isFieldRichText } from '@/object-record/record-field/ui/types/guards/isFieldRichText';
+import { isFieldText } from '@/object-record/record-field/ui/types/guards/isFieldText';
 import { hasJunctionConfig } from '@/object-record/record-field/ui/utils/junction/hasJunctionConfig';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId';
@@ -17,6 +18,7 @@ import { FieldWidgetMorphRelationField } from '@/page-layout/widgets/field/compo
 import { FieldWidgetRelationCard } from '@/page-layout/widgets/field/components/FieldWidgetRelationCard';
 import { FieldWidgetRelationField } from '@/page-layout/widgets/field/components/FieldWidgetRelationField';
 import { assertFieldWidgetOrThrow } from '@/page-layout/widgets/field/utils/assertFieldWidgetOrThrow';
+import { FieldWidgetTextEditor } from '@/page-layout/widgets/field/components/FieldWidgetTextEditor';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
@@ -179,6 +181,19 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
     );
   }
 
+  if (
+    isFieldText(fieldDefinition) &&
+    fieldDisplayMode === FieldDisplayMode.EDITOR
+  ) {
+    return (
+      <FieldWidgetTextEditor
+        fieldMetadataItem={fieldMetadataItem}
+        objectMetadataItem={objectMetadataItem}
+        recordId={targetRecord.id}
+      />
+    );
+  }
+
   return (
     <FieldWidgetDisplay
       fieldDefinition={fieldDefinition}
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetTextEditor.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetTextEditor.tsx
new file mode 100644
index 0000000000..68c0274e72
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetTextEditor.tsx
@@ -0,0 +1,97 @@
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { useIsRecordFieldReadOnly } from '@/object-record/read-only/hooks/useIsRecordFieldReadOnly';
+import { isFieldTextValue } from '@/object-record/record-field/ui/types/guards/isFieldTextValue';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { useAtomFamilySelectorState } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorState';
+import { styled } from '@linaria/react';
+import { useCallback, useEffect } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useDebouncedCallback } from 'use-debounce';
+
+const StyledContainer = styled.div`
+  box-sizing: border-box;
+  padding: ${themeCssVariables.spacing[4]};
+  width: 100%;
+`;
+
+type FieldWidgetTextEditorProps = {
+  fieldMetadataItem: FieldMetadataItem;
+  objectMetadataItem: EnrichedObjectMetadataItem;
+  recordId: string;
+};
+
+export const FieldWidgetTextEditor = ({
+  fieldMetadataItem,
+  objectMetadataItem,
+  recordId,
+}: FieldWidgetTextEditorProps) => {
+  const fieldName = fieldMetadataItem.name;
+  const { updateOneRecord } = useUpdateOneRecord();
+
+  const [fieldValue, setFieldValue] = useAtomFamilySelectorState(
+    recordStoreFamilySelector,
+    {
+      recordId,
+      fieldName,
+    },
+  );
+
+  const isRecordFieldReadOnly = useIsRecordFieldReadOnly({
+    recordId,
+    objectMetadataId: objectMetadataItem.id,
+    fieldMetadataId: fieldMetadataItem.id,
+  });
+
+  const textAreaId = `field-widget-text-editor-${recordId}-${fieldName}`;
+
+  const persistTextDebounced = useDebouncedCallback((text: string) => {
+    if (isRecordFieldReadOnly === true) {
+      return;
+    }
+
+    updateOneRecord({
+      objectNameSingular: objectMetadataItem.nameSingular,
+      idToUpdate: recordId,
+      updateOneRecordInput: {
+        [fieldName]: text,
+      },
+    });
+  }, 300);
+
+  useEffect(() => () => persistTextDebounced.flush(), [persistTextDebounced]);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      if (isRecordFieldReadOnly === true) {
+        return;
+      }
+
+      setFieldValue(text);
+
+      persistTextDebounced(text);
+    },
+    [isRecordFieldReadOnly, persistTextDebounced, setFieldValue],
+  );
+
+  const handleBlur = useCallback(() => {
+    persistTextDebounced.flush();
+  }, [persistTextDebounced]);
+
+  const fieldTextValue = isFieldTextValue(fieldValue) ? fieldValue : '';
+
+  return (
+    <StyledContainer>
+      <TextArea
+        textAreaId={textAreaId}
+        value={fieldTextValue}
+        readOnly={isRecordFieldReadOnly}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        variant="transparent"
+      />
+    </StyledContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
index e31952b000..80548e4578 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
@@ -255,7 +255,6 @@ const mockCompanyRecord: ObjectRecord = {
   },
 };
 
-// Sets a record in both Jotai stores so field display hooks can read it
 const setRecordInStores = (recordId: string, record: ObjectRecord) => {
   jotaiStore.set(recordStoreFamilyState.atomFamily(recordId), record);
 };
@@ -309,6 +308,169 @@ const createPageLayoutWithWidget = (
   deletedAt: null,
 });
 
+type BuildFieldWidgetArgs = {
+  id: string;
+  title: string;
+  objectMetadataId: string;
+  fieldMetadataId: string;
+  fieldDisplayMode: FieldDisplayMode;
+};
+
+const buildFieldWidget = ({
+  id,
+  title,
+  objectMetadataId,
+  fieldMetadataId,
+  fieldDisplayMode,
+}: BuildFieldWidgetArgs): PageLayoutWidget => ({
+  __typename: 'PageLayoutWidget',
+  applicationId: '',
+  isActive: true,
+  id,
+  pageLayoutTabId: TAB_ID_OVERVIEW,
+  type: WidgetType.FIELD,
+  title,
+  objectMetadataId,
+  gridPosition: {
+    __typename: 'GridPosition',
+    row: 0,
+    column: 0,
+    rowSpan: 1,
+    columnSpan: 2,
+  },
+  configuration: {
+    __typename: 'FieldConfiguration',
+    configurationType: WidgetConfigurationType.FIELD,
+    fieldMetadataId,
+    fieldDisplayMode,
+  },
+  createdAt: '2024-01-01T00:00:00Z',
+  updatedAt: '2024-01-01T00:00:00Z',
+  deletedAt: null,
+});
+
+type FieldWidgetStorySetup = {
+  widget: PageLayoutWidget;
+  objectMetadataId: string;
+  targetRecord: { id: string; nameSingular: string };
+  records: Array<{ id: string; record: ObjectRecord }>;
+};
+
+const renderFieldWidgetStory = ({
+  widget,
+  objectMetadataId,
+  targetRecord,
+  records,
+}: FieldWidgetStorySetup) => {
+  setTestObjectMetadataItemsInMetadataStore(
+    jotaiStore,
+    getTestEnrichedObjectMetadataItemsMock(),
+  );
+  jotaiStore.set(isMinimalMetadataReadyState.atom, true);
+  const pageLayoutData = createPageLayoutWithWidget(widget, objectMetadataId);
+  jotaiStore.set(
+    pageLayoutPersistedComponentState.atomFamily({
+      instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+    }),
+    pageLayoutData,
+  );
+  jotaiStore.set(
+    pageLayoutDraftComponentState.atomFamily({
+      instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+    }),
+    pageLayoutData,
+  );
+  records.forEach(({ id, record }) => setRecordInStores(id, record));
+
+  return (
+    <div style={{ width: '400px', padding: '20px' }}>
+      <JestMetadataAndApolloMocksWrapper>
+        <CoreClientProviderWrapper>
+          <PageLayoutTestWrapper store={jotaiStore}>
+            <LayoutRenderingProvider
+              value={{
+                isInSidePanel: false,
+                layoutType: PageLayoutType.RECORD_PAGE,
+                targetRecordIdentifier: {
+                  id: targetRecord.id,
+                  targetObjectNameSingular: targetRecord.nameSingular,
+                },
+              }}
+            >
+              <PageLayoutContentProvider
+                value={{
+                  layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
+                  tabId: 'fields',
+                }}
+              >
+                <WidgetComponentInstanceContext.Provider
+                  value={{ instanceId: widget.id }}
+                >
+                  <FieldWidget widget={widget} />
+                </WidgetComponentInstanceContext.Provider>
+              </PageLayoutContentProvider>
+            </LayoutRenderingProvider>
+          </PageLayoutTestWrapper>
+        </CoreClientProviderWrapper>
+      </JestMetadataAndApolloMocksWrapper>
+    </div>
+  );
+};
+
+const companyTargetRecord = {
+  id: TEST_RECORD_ID,
+  nameSingular: companyObjectMetadataItem.nameSingular,
+};
+
+const personTargetRecord = {
+  id: TEST_PERSON_RECORD_ID,
+  nameSingular: personObjectMetadataItem.nameSingular,
+};
+
+const opportunityTargetRecord = {
+  id: TEST_OPPORTUNITY_RECORD_ID,
+  nameSingular: opportunityObjectMetadataItem.nameSingular,
+};
+
+const timelineActivityTargetRecord = {
+  id: TEST_TIMELINE_ACTIVITY_RECORD_ID,
+  nameSingular: timelineActivityObjectMetadataItem.nameSingular,
+};
+
+const companyRecords = [{ id: TEST_RECORD_ID, record: mockCompanyRecord }];
+
+const companyRecordsWithAccountOwner: FieldWidgetStorySetup['records'] = [
+  { id: TEST_RECORD_ID, record: mockCompanyRecord },
+  ...(mockCompanyRecord.accountOwner !== null &&
+  mockCompanyRecord.accountOwner !== undefined
+    ? [
+        {
+          id: mockCompanyRecord.accountOwner.id,
+          record: mockCompanyRecord.accountOwner,
+        },
+      ]
+    : []),
+];
+
+const companyRecordsWithPerson: FieldWidgetStorySetup['records'] = [
+  { id: TEST_RECORD_ID, record: mockCompanyRecord },
+  { id: TEST_PERSON_RECORD_ID, record: mockPersonRecord },
+];
+
+const personRecords = [{ id: TEST_PERSON_RECORD_ID, record: mockPersonRecord }];
+
+const opportunityRecords = [
+  { id: TEST_OPPORTUNITY_RECORD_ID, record: mockOpportunityRecord },
+];
+
+const timelineActivityRecords: FieldWidgetStorySetup['records'] = [
+  {
+    id: TEST_TIMELINE_ACTIVITY_RECORD_ID,
+    record: mockTimelineActivityRecord,
+  },
+  { id: 'test-workspace-member-xyz', record: mockWorkspaceMemberRecord },
+];
+
 const meta: Meta<typeof FieldWidget> = {
   title: 'Modules/PageLayout/Widgets/FieldWidget',
   component: FieldWidget,
@@ -331,92 +493,19 @@ export default meta;
 type Story = StoryObj<typeof FieldWidget>;
 
 export const TextFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-text-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Company Name',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 0,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-text-field',
+        title: 'Company Name',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: nameField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -425,93 +514,43 @@ export const TextFieldWidget: Story = {
   },
 };
 
-export const AddressFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-address-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Address',
+export const TextFieldEditorWidget: Story = {
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-text-editor-field',
+        title: 'Company Name',
+        objectMetadataId: companyObjectMetadataItem.id,
+        fieldMetadataId: nameField.id,
+        fieldDisplayMode: FieldDisplayMode.EDITOR,
+      }),
       objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 1,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 3,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const companyNameEditor =
+      await canvas.findByDisplayValue('Acme Corporation');
+    expect(companyNameEditor).toBeVisible();
+  },
+};
+
+export const AddressFieldWidget: Story = {
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-address-field',
+        title: 'Address',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: addressField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -524,92 +563,19 @@ export const AddressFieldWidget: Story = {
 };
 
 export const NumberFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-number-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Employees',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 2,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-number-field',
+        title: 'Employees',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: employeesField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -619,92 +585,19 @@ export const NumberFieldWidget: Story = {
 };
 
 export const LinkFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-link-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'LinkedIn',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 3,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-link-field',
+        title: 'LinkedIn',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: linkedinField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -714,102 +607,19 @@ export const LinkFieldWidget: Story = {
 };
 
 export const ManyToOneRelationFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-relation-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Account Owner',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 4,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-relation-field',
+        title: 'Account Owner',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: accountOwnerField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-    // Set the related WorkspaceMember record for relation field display
-    if (
-      mockCompanyRecord.accountOwner !== null &&
-      mockCompanyRecord.accountOwner !== undefined
-    ) {
-      setRecordInStores(
-        mockCompanyRecord.accountOwner.id,
-        mockCompanyRecord.accountOwner,
-      );
-    }
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecordsWithAccountOwner,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -819,94 +629,19 @@ export const ManyToOneRelationFieldWidget: Story = {
 };
 
 export const OneToManyRelationFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-one-to-many-relation-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'People',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 11,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-one-to-many-relation-field',
+        title: 'People',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: companyPeopleField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-    // Set the related Person record for ONE_TO_MANY relation display
-    setRecordInStores(TEST_PERSON_RECORD_ID, mockPersonRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecordsWithPerson,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -916,92 +651,19 @@ export const OneToManyRelationFieldWidget: Story = {
 };
 
 export const BooleanFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-boolean-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Ideal Customer Profile',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 5,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-boolean-field',
+        title: 'Ideal Customer Profile',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: idealCustomerProfileField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1010,92 +672,19 @@ export const BooleanFieldWidget: Story = {
 };
 
 export const CurrencyFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-currency-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Annual Recurring Revenue',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 6,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-currency-field',
+        title: 'Annual Recurring Revenue',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: annualRecurringRevenueField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1104,92 +693,19 @@ export const CurrencyFieldWidget: Story = {
 };
 
 export const EmailsFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-emails-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Emails',
-      objectMetadataId: personObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 7,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-emails-field',
+        title: 'Emails',
+        objectMetadataId: personObjectMetadataItem.id,
         fieldMetadataId: personEmailsField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      personObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_PERSON_RECORD_ID, mockPersonRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_PERSON_RECORD_ID,
-                    targetObjectNameSingular:
-                      personObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: personObjectMetadataItem.id,
+      targetRecord: personTargetRecord,
+      records: personRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1199,92 +715,19 @@ export const EmailsFieldWidget: Story = {
 };
 
 export const PhonesFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-phones-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Phones',
-      objectMetadataId: personObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 8,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-phones-field',
+        title: 'Phones',
+        objectMetadataId: personObjectMetadataItem.id,
         fieldMetadataId: personPhonesField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      personObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_PERSON_RECORD_ID, mockPersonRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_PERSON_RECORD_ID,
-                    targetObjectNameSingular:
-                      personObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: personObjectMetadataItem.id,
+      targetRecord: personTargetRecord,
+      records: personRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1294,192 +737,44 @@ export const PhonesFieldWidget: Story = {
 };
 
 export const SelectFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-select-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Stage',
-      objectMetadataId: opportunityObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 9,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-select-field',
+        title: 'Stage',
+        objectMetadataId: opportunityObjectMetadataItem.id,
         fieldMetadataId: opportunityStageField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      opportunityObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_OPPORTUNITY_RECORD_ID, mockOpportunityRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_OPPORTUNITY_RECORD_ID,
-                    targetObjectNameSingular:
-                      opportunityObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: opportunityObjectMetadataItem.id,
+      targetRecord: opportunityTargetRecord,
+      records: opportunityRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Select field displays the selected option label
     const stage = await canvas.findByText(/Proposal/);
     expect(stage).toBeVisible();
   },
 };
 
 export const MultiSelectFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-multi-select-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Work Policy',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 10,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-multi-select-field',
+        title: 'Work Policy',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: companyWorkPolicyField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Multi-select displays multiple chips
     const onSiteChip = await canvas.findByText(/On-Site/);
     expect(onSiteChip).toBeVisible();
 
@@ -1489,97 +784,19 @@ export const MultiSelectFieldWidget: Story = {
 };
 
 export const TimelineActivityRelationFieldWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-timeline-activity-relation-field',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Workspace Member',
-      objectMetadataId: timelineActivityObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 12,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-timeline-activity-relation-field',
+        title: 'Workspace Member',
+        objectMetadataId: timelineActivityObjectMetadataItem.id,
         fieldMetadataId: timelineActivityWorkspaceMemberField.id,
         fieldDisplayMode: FieldDisplayMode.FIELD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      timelineActivityObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(
-      TEST_TIMELINE_ACTIVITY_RECORD_ID,
-      mockTimelineActivityRecord,
-    );
-    // Set the related WorkspaceMember record for TimelineActivity relation display
-    setRecordInStores('test-workspace-member-xyz', mockWorkspaceMemberRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_TIMELINE_ACTIVITY_RECORD_ID,
-                    targetObjectNameSingular:
-                      timelineActivityObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: timelineActivityObjectMetadataItem.id,
+      targetRecord: timelineActivityTargetRecord,
+      records: timelineActivityRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1589,101 +806,19 @@ export const TimelineActivityRelationFieldWidget: Story = {
 };
 
 export const ManyToOneRelationCardWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-relation-card',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Account Owner',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 4,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-relation-card',
+        title: 'Account Owner',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: accountOwnerField.id,
         fieldDisplayMode: FieldDisplayMode.CARD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-    if (
-      mockCompanyRecord.accountOwner !== null &&
-      mockCompanyRecord.accountOwner !== undefined
-    ) {
-      setRecordInStores(
-        mockCompanyRecord.accountOwner.id,
-        mockCompanyRecord.accountOwner,
-      );
-    }
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecordsWithAccountOwner,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1702,93 +837,19 @@ export const ManyToOneRelationCardWidget: Story = {
 };
 
 export const OneToManyRelationCardWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-one-to-many-relation-card',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'People',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 11,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-one-to-many-relation-card',
+        title: 'People',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: companyPeopleField.id,
         fieldDisplayMode: FieldDisplayMode.CARD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, mockCompanyRecord);
-    setRecordInStores(TEST_PERSON_RECORD_ID, mockPersonRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: companyRecordsWithPerson,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1798,96 +859,19 @@ export const OneToManyRelationCardWidget: Story = {
 };
 
 export const TimelineActivityRelationCardWidget: Story = {
-  render: () => {
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-timeline-activity-relation-card',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'Workspace Member',
-      objectMetadataId: timelineActivityObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 12,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+  render: () =>
+    renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-timeline-activity-relation-card',
+        title: 'Workspace Member',
+        objectMetadataId: timelineActivityObjectMetadataItem.id,
         fieldMetadataId: timelineActivityWorkspaceMemberField.id,
         fieldDisplayMode: FieldDisplayMode.CARD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      timelineActivityObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(
-      TEST_TIMELINE_ACTIVITY_RECORD_ID,
-      mockTimelineActivityRecord,
-    );
-    setRecordInStores('test-workspace-member-xyz', mockWorkspaceMemberRecord);
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_TIMELINE_ACTIVITY_RECORD_ID,
-                    targetObjectNameSingular:
-                      timelineActivityObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
-  },
+      objectMetadataId: timelineActivityObjectMetadataItem.id,
+      targetRecord: timelineActivityTargetRecord,
+      records: timelineActivityRecords,
+    }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -1905,7 +889,6 @@ export const TimelineActivityRelationCardWidget: Story = {
   },
 };
 
-// Helper function to generate mock person records for progressive loading tests
 const generateMockPersonRecords = (count: number) => {
   const names = [
     { firstName: 'Jane', lastName: 'Smith' },
@@ -1961,119 +944,41 @@ export const OneToManyRelationCardWidgetWithProgressiveLoading: Story = {
       })),
     };
 
-    const widget: PageLayoutWidget = {
-      __typename: 'PageLayoutWidget',
-      applicationId: '',
-      isActive: true,
-      id: 'widget-one-to-many-relation-card-progressive',
-      pageLayoutTabId: TAB_ID_OVERVIEW,
-      type: WidgetType.FIELD,
-      title: 'People',
-      objectMetadataId: companyObjectMetadataItem.id,
-      gridPosition: {
-        __typename: 'GridPosition',
-        row: 11,
-        column: 0,
-        rowSpan: 1,
-        columnSpan: 2,
-      },
-      configuration: {
-        __typename: 'FieldConfiguration',
-        configurationType: WidgetConfigurationType.FIELD,
+    return renderFieldWidgetStory({
+      widget: buildFieldWidget({
+        id: 'widget-one-to-many-relation-card-progressive',
+        title: 'People',
+        objectMetadataId: companyObjectMetadataItem.id,
         fieldMetadataId: companyPeopleField.id,
         fieldDisplayMode: FieldDisplayMode.CARD,
-      },
-      createdAt: '2024-01-01T00:00:00Z',
-      updatedAt: '2024-01-01T00:00:00Z',
-      deletedAt: null,
-    };
-
-    setTestObjectMetadataItemsInMetadataStore(
-      jotaiStore,
-      getTestEnrichedObjectMetadataItemsMock(),
-    );
-    jotaiStore.set(isMinimalMetadataReadyState.atom, true);
-    const pageLayoutData = createPageLayoutWithWidget(
-      widget,
-      companyObjectMetadataItem.id,
-    );
-    jotaiStore.set(
-      pageLayoutPersistedComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
       }),
-      pageLayoutData,
-    );
-    jotaiStore.set(
-      pageLayoutDraftComponentState.atomFamily({
-        instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
-      }),
-      pageLayoutData,
-    );
-    setRecordInStores(TEST_RECORD_ID, companyWithManyPeople);
-    // Set each person record in the store
-    mockPeople.forEach((person) => {
-      setRecordInStores(person.id, person);
+      objectMetadataId: companyObjectMetadataItem.id,
+      targetRecord: companyTargetRecord,
+      records: [
+        { id: TEST_RECORD_ID, record: companyWithManyPeople },
+        ...mockPeople.map((person) => ({ id: person.id, record: person })),
+      ],
     });
-
-    return (
-      <div style={{ width: '400px', padding: '20px' }}>
-        <JestMetadataAndApolloMocksWrapper>
-          <CoreClientProviderWrapper>
-            <PageLayoutTestWrapper store={jotaiStore}>
-              <LayoutRenderingProvider
-                value={{
-                  isInSidePanel: false,
-                  layoutType: PageLayoutType.RECORD_PAGE,
-                  targetRecordIdentifier: {
-                    id: TEST_RECORD_ID,
-                    targetObjectNameSingular:
-                      companyObjectMetadataItem.nameSingular,
-                  },
-                }}
-              >
-                <PageLayoutContentProvider
-                  value={{
-                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
-                    tabId: 'fields',
-                  }}
-                >
-                  <WidgetComponentInstanceContext.Provider
-                    value={{ instanceId: widget.id }}
-                  >
-                    <FieldWidget widget={widget} />
-                  </WidgetComponentInstanceContext.Provider>
-                </PageLayoutContentProvider>
-              </LayoutRenderingProvider>
-            </PageLayoutTestWrapper>
-          </CoreClientProviderWrapper>
-        </JestMetadataAndApolloMocksWrapper>
-      </div>
-    );
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Verify initial display - should show first 5 items
     const firstPerson = await canvas.findByText('Jane Smith 1');
     expect(firstPerson).toBeVisible();
 
     const fifthPerson = await canvas.findByText('Carol Miller 5');
     expect(fifthPerson).toBeVisible();
 
-    // Verify sixth person is NOT visible initially
     expect(canvas.queryByText('David Wilson 6')).not.toBeInTheDocument();
 
-    // Verify "More (7)" button is visible (12 total - 5 shown = 7 remaining)
     const moreButton = await canvas.findByTestId(
       'field-widget-show-more-button',
     );
     expect(moreButton).toBeVisible();
     expect(moreButton).toHaveTextContent('More (7)');
 
-    // Click "More" button to load 5 more items
     await userEvent.click(moreButton);
 
-    // Verify more items are now visible
     await waitFor(() => {
       const sixthPerson = canvas.getByText('David Wilson 6');
       expect(sixthPerson).toBeVisible();
@@ -2082,22 +987,18 @@ export const OneToManyRelationCardWidgetWithProgressiveLoading: Story = {
     const tenthPerson = await canvas.findByText('Henry Thomas 10');
     expect(tenthPerson).toBeVisible();
 
-    // Verify "More (2)" button is visible (12 total - 10 shown = 2 remaining)
     const updatedMoreButton = await canvas.findByTestId(
       'field-widget-show-more-button',
     );
     expect(updatedMoreButton).toHaveTextContent('More (2)');
 
-    // Click "More" button again to load remaining items
     await userEvent.click(updatedMoreButton);
 
-    // Verify all items are now visible
     await waitFor(() => {
       const twelfthPerson = canvas.getByText('Jack White 12');
       expect(twelfthPerson).toBeVisible();
     });
 
-    // Verify "More" button is no longer visible
     expect(
       canvas.queryByTestId('field-widget-show-more-button'),
     ).not.toBeInTheDocument();
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/constants/fieldWidgetConfig.ts b/packages/twenty-front/src/modules/page-layout/widgets/field/constants/fieldWidgetConfig.ts
index c8d3625a30..5387a84956 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/constants/fieldWidgetConfig.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/constants/fieldWidgetConfig.ts
@@ -9,6 +9,10 @@ type FieldWidgetFieldTypeConfig = {
 export const FIELD_WIDGET_CONFIG: Partial<
   Record<FieldMetadataType, FieldWidgetFieldTypeConfig>
 > = {
+  [FieldMetadataType.TEXT]: {
+    availableDisplayModes: [FieldDisplayMode.FIELD, FieldDisplayMode.EDITOR],
+    defaultDisplayMode: FieldDisplayMode.FIELD,
+  },
   [FieldMetadataType.RELATION]: {
     availableDisplayModes: [FieldDisplayMode.FIELD, FieldDisplayMode.CARD],
     defaultDisplayMode: FieldDisplayMode.CARD,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/utils/__tests__/getFieldWidgetDisplayModeConfig.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/field/utils/__tests__/getFieldWidgetDisplayModeConfig.test.ts
new file mode 100644
index 0000000000..34a04ed306
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/utils/__tests__/getFieldWidgetDisplayModeConfig.test.ts
@@ -0,0 +1,34 @@
+import { FieldMetadataType } from 'twenty-shared/types';
+import { FieldDisplayMode } from '~/generated-metadata/graphql';
+
+import {
+  getFieldWidgetAvailableDisplayModes,
+  getFieldWidgetDefaultDisplayMode,
+  isDisplayModeValidForFieldType,
+} from '@/page-layout/widgets/field/utils/getFieldWidgetDisplayModeConfig';
+
+describe('getFieldWidgetDisplayModeConfig', () => {
+  it('allows text fields to use field or editor display modes', () => {
+    expect(getFieldWidgetAvailableDisplayModes(FieldMetadataType.TEXT)).toEqual(
+      [FieldDisplayMode.FIELD, FieldDisplayMode.EDITOR],
+    );
+  });
+
+  it('keeps field as the default display mode for text fields', () => {
+    expect(getFieldWidgetDefaultDisplayMode(FieldMetadataType.TEXT)).toBe(
+      FieldDisplayMode.FIELD,
+    );
+  });
+
+  it('falls back to field mode for field types that do not support editor mode', () => {
+    expect(
+      isDisplayModeValidForFieldType(
+        FieldMetadataType.NUMBER,
+        FieldDisplayMode.EDITOR,
+      ),
+    ).toBe(false);
+    expect(getFieldWidgetDefaultDisplayMode(FieldMetadataType.NUMBER)).toBe(
+      FieldDisplayMode.FIELD,
+    );
+  });
+});
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
index 3ddf583d82..c4056a952d 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
@@ -156,6 +156,7 @@ export const ConfigVariableDatabaseInput = ({
             <TextArea
               textAreaId={jsonArrayTextAreaId}
               label={label}
+              maxRows={5}
               value={
                 Array.isArray(value)
                   ? JSON.stringify(value)
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
index 3f19dffd51..3c636a2400 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
@@ -41,6 +41,7 @@ export const SettingsDataModelFieldDescriptionForm = ({
           textAreaId={descriptionTextAreaId}
           placeholder={t`Write a description`}
           minRows={4}
+          maxRows={5}
           value={value ?? undefined}
           onChange={onChange}
           disabled={disabled}
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index 11429d18fd..839c76a056 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -246,6 +246,7 @@ export const SettingsDataModelObjectAboutForm = ({
             textAreaId={descriptionTextAreaId}
             placeholder={t`Write a description`}
             minRows={4}
+            maxRows={5}
             value={value ?? undefined}
             onChange={(nextValue) => onChange(nextValue ?? null)}
             onBlur={() => onNewDirtyField?.()}
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
index ada37341b9..d955f1f52a 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
@@ -135,6 +135,7 @@ export const SettingsDevelopersWebhookForm = ({
                   textAreaId={descriptionTextAreaId}
                   placeholder={t`Write a description`}
                   minRows={4}
+                  maxRows={5}
                   value={value || ''}
                   onChange={onChange}
                 />
diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionNewForm.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionNewForm.tsx
index 8364b47a01..7cc9d64fe8 100644
--- a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionNewForm.tsx
+++ b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionNewForm.tsx
@@ -48,6 +48,7 @@ export const SettingsLogicFunctionNewForm = ({
           textAreaId={descriptionTextAreaId}
           placeholder={t`Description`}
           minRows={4}
+          maxRows={5}
           value={formValues.description}
           onChange={onChange('description')}
           readOnly={readonly}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
index 0c74c8fe62..60d1f54613 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
@@ -87,6 +87,7 @@ export const SettingsRoleSettings = ({
         <TextArea
           textAreaId={descriptionTextAreaId}
           minRows={4}
+          maxRows={5}
           placeholder={t`Write a description`}
           value={settingsDraftRole.description || ''}
           onChange={(value: string) => {
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
index 2e7853e719..6dcabb72a3 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
@@ -9,7 +9,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const MAX_ROWS = 5;
+type TextAreaVariant = 'default' | 'transparent';
 
 export type TextAreaProps = {
   textAreaId: string;
@@ -24,6 +24,7 @@ export type TextAreaProps = {
   className?: string;
   onBlur?: () => void;
   readOnly?: boolean;
+  variant?: TextAreaVariant;
 };
 
 const StyledContainer = styled.div`
@@ -40,26 +41,43 @@ const StyledLabel = styled.label`
   margin-bottom: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledTextAreaContainer = styled.div`
+const StyledTextAreaContainer = styled.div<{ variant: TextAreaVariant }>`
   > textarea {
-    background-color: ${themeCssVariables.background.transparent.lighter};
-    border: 1px solid ${themeCssVariables.border.color.medium};
-    border-radius: ${themeCssVariables.border.radius.sm};
+    background-color: ${({ variant }) =>
+      variant === 'transparent'
+        ? 'transparent'
+        : themeCssVariables.background.transparent.lighter};
+    border: ${({ variant }) =>
+      variant === 'transparent'
+        ? 'none'
+        : `1px solid ${themeCssVariables.border.color.medium}`};
+    border-radius: ${({ variant }) =>
+      variant === 'transparent' ? '0' : themeCssVariables.border.radius.sm};
     box-sizing: border-box;
     color: ${themeCssVariables.font.color.primary};
+    display: block;
     font-family: inherit;
     font-size: ${themeCssVariables.font.size.md};
     font-weight: ${themeCssVariables.font.weight.regular};
-    line-height: 16px;
-    overflow: auto;
-    padding: ${themeCssVariables.spacing[2]};
+    line-height: ${({ variant }) =>
+      variant === 'transparent' ? 'inherit' : '16px'};
+    overflow: ${({ variant }) =>
+      variant === 'transparent' ? 'hidden' : 'auto'};
+    padding: ${({ variant }) =>
+      variant === 'transparent' ? '0' : themeCssVariables.spacing[2]};
     resize: none;
     width: 100%;
 
     &:focus {
       outline: none;
-      box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
-      border-color: ${themeCssVariables.color.blue};
+      box-shadow: ${({ variant }) =>
+        variant === 'transparent'
+          ? 'none'
+          : `0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2}`};
+      border-color: ${({ variant }) =>
+        variant === 'transparent'
+          ? 'transparent'
+          : themeCssVariables.color.blue};
     }
 
     &::placeholder {
@@ -80,14 +98,17 @@ export const TextArea = ({
   height,
   placeholder,
   minRows = 1,
-  maxRows = MAX_ROWS,
+  maxRows,
   value = '',
   className,
   onChange,
   onBlur,
   readOnly = false,
+  variant = 'default',
 }: TextAreaProps) => {
-  const computedMinRows = Math.min(minRows, maxRows);
+  const computedMinRows = isDefined(maxRows)
+    ? Math.min(minRows, maxRows)
+    : minRows;
 
   const instanceId = useId();
 
@@ -117,7 +138,7 @@ export const TextArea = ({
     <StyledContainer>
       {label && <StyledLabel htmlFor={instanceId}>{label}</StyledLabel>}
 
-      <StyledTextAreaContainer>
+      <StyledTextAreaContainer variant={variant}>
         <TextareaAutosize
           id={instanceId}
           placeholder={placeholder}
diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
index 829803c8f6..adc2fff4ed 100644
--- a/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
@@ -22,7 +22,7 @@ const meta: Meta<typeof TextArea> = {
   title: 'UI/Input/TextArea',
   component: TextArea,
   decorators: [ComponentDecorator],
-  args: { minRows: 4, placeholder: 'Lorem Ipsum' },
+  args: { minRows: 4, maxRows: 5, placeholder: 'Lorem Ipsum' },
   render: Render,
 };
 
@@ -55,3 +55,20 @@ export const WithLabel: Story = {
     expect(input).toHaveFocus();
   },
 };
+
+export const Transparent: Story = {
+  args: {
+    variant: 'transparent',
+    value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  },
+};
+
+export const TransparentUnbounded: Story = {
+  args: {
+    variant: 'transparent',
+    maxRows: undefined,
+    value: Array.from({ length: 10 }, (_, index) => `Line ${index + 1}`).join(
+      '\n',
+    ),
+  },
+};
diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx
index f6854ab4b1..c3b6e72af7 100644
--- a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx
@@ -481,6 +481,7 @@ export const SettingsSkillForm = ({ mode }: { mode: 'create' | 'edit' }) => {
                   textAreaId="skill-description-textarea"
                   placeholder={t`Write a description`}
                   minRows={3}
+                  maxRows={5}
                   value={formValues.description}
                   onChange={(value) =>
                     handleFieldChange('description', value ?? '')
diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsToolDetail.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsToolDetail.tsx
index 28ffc385b1..bffbf5c3e4 100644
--- a/packages/twenty-front/src/pages/settings/ai/SettingsToolDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/SettingsToolDetail.tsx
@@ -229,6 +229,7 @@ export const SettingsToolDetail = () => {
                 textAreaId="tool-description-textarea"
                 placeholder={t`Write a description`}
                 minRows={3}
+                maxRows={5}
                 value={editedDescription ?? description ?? ''}
                 onChange={handleDescriptionChange}
                 disabled={isReadOnly}