Update timeline empty state in the side panel (#11093)

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

Before:


https://github.com/user-attachments/assets/83764543-06bf-455e-8b07-fa2822691005


After:


https://github.com/user-attachments/assets/09afa15d-6352-4024-a6b9-2cccf5991d8a

packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx

@@ -38,10 +38,19 @@ const StyledMainContainer = styled.div`
   }
 `;
 
+const StyledRightDrawerAnimatedPlaceholderEmptyContainer = styled(
+  AnimatedPlaceholderEmptyContainer,
+)`
+  height: auto;
+  padding-top: ${({ theme }) => theme.spacing(8)};
+`;
+
 export const TimelineActivities = ({
   targetableObject,
+  isInRightDrawer,
 }: {
   targetableObject: ActivityTargetableObject;
+  isInRightDrawer?: boolean;
 }) => {
   const { timelineActivities, loading, fetchMoreRecords } =
     useTimelineActivities(targetableObject);
@@ -54,8 +63,12 @@ export const TimelineActivities = ({
   }
 
   if (isTimelineActivitiesEmpty) {
+    const EmptyContainer = isInRightDrawer
+      ? StyledRightDrawerAnimatedPlaceholderEmptyContainer
+      : AnimatedPlaceholderEmptyContainer;
+
     return (
-      <AnimatedPlaceholderEmptyContainer
+      <EmptyContainer
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
       >
@@ -68,7 +81,7 @@ export const TimelineActivities = ({
             There is no activity associated with this record.
           </AnimatedPlaceholderEmptySubTitle>
         </AnimatedPlaceholderEmptyTextContainer>
-      </AnimatedPlaceholderEmptyContainer>
+      </EmptyContainer>
     );
   }
 

packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx

@@ -41,8 +41,11 @@ type CardComponentProps = {
 type CardComponentType = (props: CardComponentProps) => JSX.Element | null;
 
 export const CardComponents: Record<CardType, CardComponentType> = {
-  [CardType.TimelineCard]: ({ targetableObject }) => (
-    <TimelineActivities targetableObject={targetableObject} />
+  [CardType.TimelineCard]: ({ targetableObject, isInRightDrawer }) => (
+    <TimelineActivities
+      targetableObject={targetableObject}
+      isInRightDrawer={isInRightDrawer}
+    />
   ),
 
   [CardType.FieldCard]: ({ targetableObject, isInRightDrawer }) => (