From d7dabe582696d20b203df84ce3e788c7fc5e9d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 21 Mar 2025 15:30:14 +0100
Subject: [PATCH] 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
---
 .../components/TimelineActivities.tsx           | 17 +++++++++++++++--
 .../record-show/components/CardComponents.tsx   |  7 +++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx
index 282cc43e5..2933035ac 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx
+++ b/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>
     );
   }
 
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
index 61db5c786..065fdc9ee 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
+++ b/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 }) => (