fix relation fields preview in settings (#11745)

Fixes :
- display relation fields in preview settings
- display note and task relation field in preview settings - 
- fix design (align and background color)

closes https://github.com/twentyhq/twenty/issues/7084

---------

Co-authored-by: guillim <guigloo@msn.com>

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx

@@ -17,6 +17,7 @@ import {
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
   FieldMetadataType,
+  RelationDefinition,
   RelationDefinitionType,
 } from '~/generated-metadata/graphql';
 type SettingsDataModelFieldRelationSettingsFormCardProps = {
@@ -80,12 +81,22 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
   const relationType = watchFormValue('relation.type', initialRelationType);
   const relationTypeConfig = RELATION_TYPES[relationType];
 
+  const oppositeRelationType =
+    relationType === RelationDefinitionType.MANY_TO_ONE
+      ? RelationDefinitionType.ONE_TO_MANY
+      : RelationDefinitionType.MANY_TO_ONE;
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledPreviewContent isMobile={isMobile}>
           <StyledFieldPreviewCard
-            fieldMetadataItem={fieldMetadataItem}
+            fieldMetadataItem={{
+              ...fieldMetadataItem,
+              relationDefinition: {
+                direction: relationType,
+              } as RelationDefinition,
+            }}
             shrink
             objectMetadataItem={objectMetadataItem}
             relationObjectMetadataItem={relationObjectMetadataItem}
@@ -113,6 +124,9 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
                   initialRelationFieldMetadataItem.label,
                 ) || 'Field name',
               type: FieldMetadataType.RELATION,
+              relationDefinition: {
+                direction: oppositeRelationType,
+              } as RelationDefinition,
             }}
             shrink
             objectMetadataItem={relationObjectMetadataItem}