From e3c84f289e89975d7be0c223a4bb4bb43eb41bed Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Fri, 12 Sep 2025 13:29:58 +0200
Subject: [PATCH] Fix Relation display (many side) (#14411)

Fixes https://github.com/twentyhq/twenty/issues/14280.

Imitated impementation of MultiSelectFieldDisplay.
---
 .../RelationFromManyFieldDisplay.tsx          | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/RelationFromManyFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/RelationFromManyFieldDisplay.tsx
index 86f78bcd64..5c91e1813b 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/RelationFromManyFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/RelationFromManyFieldDisplay.tsx
@@ -8,9 +8,20 @@ import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFoc
 import { useRelationFromManyFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useRelationFromManyFieldDisplay';
 
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import styled from '@emotion/styled';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
 export const RelationFromManyFieldDisplay = () => {
   const { fieldValue, fieldDefinition, generateRecordChipData } =
     useRelationFromManyFieldDisplay();
@@ -51,7 +62,7 @@ export const RelationFromManyFieldDisplay = () => {
 
     const relationFieldName = fieldName === 'noteTargets' ? 'note' : 'task';
 
-    return (
+    return isFocused ? (
       <ExpandableList isChipCountDisplayed={isFocused}>
         {fieldValue
           .map((record) => {
@@ -69,6 +80,24 @@ export const RelationFromManyFieldDisplay = () => {
           })
           .filter(isDefined)}
       </ExpandableList>
+    ) : (
+      <StyledContainer>
+        {fieldValue
+          .map((record) => {
+            if (!isDefined(record) || !isDefined(record[relationFieldName])) {
+              return undefined;
+            }
+            return (
+              <RecordChip
+                key={record.id}
+                objectNameSingular={objectNameSingular}
+                record={record[relationFieldName]}
+                forceDisableClick={disableChipClick}
+              />
+            );
+          })
+          .filter(isDefined)}
+      </StyledContainer>
     );
   } else if (isRelationFromActivityTargets) {
     return (