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 ? (
{fieldValue
.map((record) => {
@@ -69,6 +80,24 @@ export const RelationFromManyFieldDisplay = () => {
})
.filter(isDefined)}
+ ) : (
+
+ {fieldValue
+ .map((record) => {
+ if (!isDefined(record) || !isDefined(record[relationFieldName])) {
+ return undefined;
+ }
+ return (
+
+ );
+ })
+ .filter(isDefined)}
+
);
} else if (isRelationFromActivityTargets) {
return (