fix long activity panel in deleted record details (#12854)

closes #11978

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -23,7 +23,6 @@ const StyledMainContainer = styled.div`
     useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
   display: flex;
   flex-direction: column;
-  height: 100%;
   overflow: auto;
 
   justify-content: center;

packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx

@@ -4,20 +4,31 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { INFORMATION_BANNER_HEIGHT } from '@/information-banner/constants/InformationBannerHeight';
 import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
-const StyledRightDrawerRecord = styled.div<{ isMobile: boolean }>`
+const StyledRightDrawerRecord = styled.div<{
-  height: ${({ theme, isMobile }) =>
+  isMobile: boolean;
-    isMobile ? `calc(100% - ${theme.spacing(16)})` : '100%'};
+  hasDeletedRecordBanner: boolean;
+}>`
+  height: ${({ theme, isMobile, hasDeletedRecordBanner }) => {
+    const mobileOffset = isMobile ? theme.spacing(16) : '0px';
+    const bannerOffset = hasDeletedRecordBanner
+      ? INFORMATION_BANNER_HEIGHT
+      : '0px';
+    return `calc(100% - ${mobileOffset} - ${bannerOffset})`;
+  }};
 `;
 
 export const CommandMenuRecordPage = () => {
@@ -44,6 +55,13 @@ export const CommandMenuRecordPage = () => {
     viewableRecordId,
   );
 
+  const recordDeletedAt = useRecoilValue(
+    recordStoreFamilySelector({
+      recordId: objectRecordId,
+      fieldName: 'deletedAt',
+    }),
+  );
+
   const commandMenuPageInstanceId = useComponentInstanceStateContext(
     CommandMenuPageComponentInstanceContext,
   )?.instanceId;
@@ -70,7 +88,10 @@ export const CommandMenuRecordPage = () => {
             <ActionMenuComponentInstanceContext.Provider
               value={{ instanceId: commandMenuPageInstanceId }}
             >
-              <StyledRightDrawerRecord isMobile={isMobile}>
+              <StyledRightDrawerRecord
+                isMobile={isMobile}
+                hasDeletedRecordBanner={!!recordDeletedAt}
+              >
                 <TimelineActivityContext.Provider
                   value={{
                     recordId: objectRecordId,