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/modules/activities/calendar/components/CalendarEventDetails.tsx

@@ -1,7 +1,9 @@
+import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconCalendarEvent } from 'twenty-ui';
 
+import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -30,6 +32,8 @@ const StyledContainer = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
   padding: ${({ theme }) => theme.spacing(6)};
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 const StyledEventChip = styled(Chip)`
@@ -60,11 +64,13 @@ const StyledFields = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};
+  width: 100%;
 `;
 
 const StyledPropertyBox = styled(PropertyBox)`
   height: ${({ theme }) => theme.spacing(6)};
   padding: 0;
+  width: 100%;
 `;
 
 export const CalendarEventDetails = ({
@@ -88,6 +94,31 @@ export const CalendarEventDetails = ({
     ({ name }) => name,
   );
 
+  const { calendarEventParticipants } = calendarEvent;
+
+  const Fields = fieldsToDisplay.map((fieldName) => (
+    <StyledPropertyBox key={fieldName}>
+      <FieldContext.Provider
+        value={{
+          entityId: calendarEvent.id,
+          hotkeyScope: 'calendar-event-details',
+          recoilScopeId: `${calendarEvent.id}-${fieldName}`,
+          isLabelIdentifier: false,
+          fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
+            field: fieldsByName[fieldName],
+            objectMetadataItem,
+            showLabel: true,
+            labelWidth: 72,
+          }),
+          useUpdateRecord: () => [() => undefined, { loading: false }],
+          maxWidth: 300,
+        }}
+      >
+        <RecordInlineCell readonly />
+      </FieldContext.Provider>
+    </StyledPropertyBox>
+  ));
+
   return (
     <StyledContainer>
       <StyledEventChip
@@ -110,27 +141,13 @@ export const CalendarEventDetails = ({
         </StyledCreatedAt>
       </StyledHeader>
       <StyledFields>
-        {fieldsToDisplay.map((fieldName) => (
-          <StyledPropertyBox key={fieldName}>
-            <FieldContext.Provider
-              value={{
-                entityId: calendarEvent.id,
-                hotkeyScope: 'calendar-event-details',
-                recoilScopeId: `${calendarEvent.id}-${fieldName}`,
-                isLabelIdentifier: false,
-                fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
-                  field: fieldsByName[fieldName],
-                  objectMetadataItem,
-                  showLabel: true,
-                  labelWidth: 72,
-                }),
-                useUpdateRecord: () => [() => undefined, { loading: false }],
-              }}
-            >
-              <RecordInlineCell readonly />
-            </FieldContext.Provider>
-          </StyledPropertyBox>
-        ))}
+        {Fields.slice(0, 2)}
+        {calendarEventParticipants && (
+          <CalendarEventParticipantsResponseStatus
+            participants={calendarEventParticipants}
+          />
+        )}
+        {Fields.slice(2)}
       </StyledFields>
     </StyledContainer>
   );