fix: ensure we display fields in the same order as in production (#17231)

- Do not render fields that we don't want to render for now
- Preverse alphabetical order

## Without feature flag

<img width="3456" height="2160" alt="CleanShot 2026-01-19 at 11 02
57@2x"
src="https://github.com/user-attachments/assets/886116b5-6e17-4b68-96b6-ab1ed491a1e5"
/>

## With feature flag

<img width="3456" height="2234" alt="CleanShot 2026-01-19 at 11 03
31@2x"
src="https://github.com/user-attachments/assets/9bf47ca3-bc34-47de-b8e5-9615eb684a05"
/>

## With feature flag–before

<img width="3456" height="2160" alt="CleanShot 2026-01-19 at 11 03
53@2x"
src="https://github.com/user-attachments/assets/71c7dc16-b3da-4dfa-86b2-2c2ec7ff0bd8"
/>

packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetFieldMetadataItems.ts

@@ -1,8 +1,5 @@
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
-import { FieldMetadataType } from 'twenty-shared/types';
+import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
 
 type UseFieldsWidgetFieldMetadataItemsProps = {
   objectNameSingular: string;
@@ -11,19 +8,12 @@ type UseFieldsWidgetFieldMetadataItemsProps = {
 export const useFieldsWidgetFieldMetadataItems = ({
   objectNameSingular,
 }: UseFieldsWidgetFieldMetadataItemsProps): FieldMetadataItem[] => {
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const { inlineFieldMetadataItems } = useFieldListFieldMetadataItems({
     objectNameSingular,
+    excludeFieldMetadataIds: [],
+    excludeCreatedAtAndUpdatedAt: true,
+    showRelationSections: false,
   });
 
-  const { objectMetadataItems } = useObjectMetadataItems();
-
-  const fieldMetadataItems = objectMetadataItem.readableFields.filter(
-    (fieldMetadataItem) =>
-      isFieldCellSupported(fieldMetadataItem, objectMetadataItems) &&
-      fieldMetadataItem.type !== FieldMetadataType.RELATION &&
-      fieldMetadataItem.type !== FieldMetadataType.MORPH_RELATION &&
-      fieldMetadataItem.type !== FieldMetadataType.RICH_TEXT_V2,
-  );
-
-  return fieldMetadataItems;
+  return inlineFieldMetadataItems ?? [];
 };

packages/twenty-front/src/modules/page-layout/widgets/fields/utils/filterAndOrderFieldsFromConfiguration.ts

@@ -22,42 +22,34 @@ export const filterAndOrderFieldsFromConfiguration = ({
   availableFieldMetadataItems,
   context,
 }: FilterAndOrderFieldsFromConfigurationParams): FieldsConfigurationSectionWithFields[] => {
-  const fieldMetadataItemsMap = new Map(
-    availableFieldMetadataItems.map((field) => [field.id, field]),
-  );
-
   const sortedSections = [...configuration.sections].sort(
     (a, b) => a.position - b.position,
   );
 
   const sectionsWithFields = sortedSections
     .map((section) => {
-      const sortedFields = [...section.fields].sort(
-        (a, b) => a.position - b.position,
+      const sectionFieldIds = new Set(
+        section.fields.map((f) => f.fieldMetadataId),
       );
 
-      const visibleFields = sortedFields
-        .map((fieldConfig) => {
-          const fieldMetadataItem = fieldMetadataItemsMap.get(
-            fieldConfig.fieldMetadataId,
+      const visibleFields = availableFieldMetadataItems
+        .filter((fieldMetadataItem) =>
+          sectionFieldIds.has(fieldMetadataItem.id),
+        )
+        .filter((fieldMetadataItem) => {
+          const fieldConfig = section.fields.find(
+            (f) => f.fieldMetadataId === fieldMetadataItem.id,
           );
 
-          if (!isDefined(fieldMetadataItem)) {
-            return null;
+          if (!isDefined(fieldConfig)) {
+            return false;
           }
 
-          const isVisible = evaluateWidgetVisibility({
+          return evaluateWidgetVisibility({
             conditionalDisplay: fieldConfig.conditionalDisplay,
             context,
           });
-
-          if (!isVisible) {
-            return null;
-          }
-
-          return fieldMetadataItem;
-        })
-        .filter(isDefined);
+        });
 
       if (visibleFields.length === 0) {
         return null;