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

closes #11978

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2025-07-03 03:50:33 +05:30
committed by GitHub
parent 4d55f4e990
commit 29dbd3fc25
2 changed files with 25 additions and 5 deletions

View File

@ -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;

View File

@ -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 }>`
height: ${({ theme, isMobile }) =>
isMobile ? `calc(100% - ${theme.spacing(16)})` : '100%'};
const StyledRightDrawerRecord = styled.div<{
isMobile: boolean;
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,