4810 display participants in the right drawer of the calendar event (#4896)

Closes #4810

- Introduces a new component `ExpandableList` which uses intersection
observers to display the maximum number of elements possible

packages/twenty-front/src/testing/mock-data/calendar.ts

@@ -10,10 +10,28 @@ export const mockedCalendarEvents: CalendarEvent[] = [
     isFullDay: false,
     startsAt: addDays(new Date().setHours(10, 0), 1).toISOString(),
     visibility: 'METADATA',
-    participants: [
-      { displayName: 'John Doe', workspaceMemberId: 'john-doe' },
-      { displayName: 'Jane Doe', workspaceMemberId: 'jane-doe' },
-      { displayName: 'Tim Apple', workspaceMemberId: 'tim-apple' },
+    calendarEventParticipants: [
+      {
+        id: '1',
+        handle: 'jdoe',
+        isOrganizer: false,
+        responseStatus: 'ACCEPTED',
+        displayName: 'John Doe',
+      },
+      {
+        id: '2',
+        handle: 'jadoe',
+        isOrganizer: false,
+        responseStatus: 'ACCEPTED',
+        displayName: 'Jane Doe',
+      },
+      {
+        id: '3',
+        handle: 'tapple',
+        isOrganizer: false,
+        responseStatus: 'ACCEPTED',
+        displayName: 'Tim Apple',
+      },
     ],
   },
   {

packages/twenty-front/src/testing/mock-data/metadata.ts

@@ -1443,7 +1443,7 @@ const mockedCalendarEventsMetadata = {
             __typename: 'field',
             id: '07880d2d-4f08-458f-be0b-876402d2a769',
             type: 'RELATION',
-            name: 'eventParticipants',
+            name: 'calendarEventParticipants',
             label: 'Event Participants',
             description: 'Event Participants',
             icon: 'IconUserCircle',