diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx index d9d5eb3064..5a544e9af7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx @@ -2,7 +2,10 @@ import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPe import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly'; import { hasAnySoftDeleteFilterOnViewComponentSelector } from '@/object-record/record-filter/states/hasAnySoftDeleteFilterOnView'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; +import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import styled from '@emotion/styled'; +import { isDefined } from 'twenty-shared/utils'; import { type IconComponent } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { @@ -14,6 +17,18 @@ import { type AnimatedPlaceholderType, } from 'twenty-ui/layout'; +const StyledEmptyPlaceholderOuterContainer = styled( + AnimatedPlaceholderEmptyContainer, +)` + align-items: flex-start; +`; + +const StyledEmptyPlaceholderInnerContainer = styled( + AnimatedPlaceholderEmptyContainer, +)<{ width?: number }>` + width: ${({ width }) => (isDefined(width) ? `${width}px` : '100%')}; +`; + type RecordTableEmptyStateDisplayButtonComponentProps = { buttonComponent?: React.ReactNode; }; @@ -50,29 +65,35 @@ export const RecordTableEmptyStateDisplay = ( hasAnySoftDeleteFilterOnViewComponentSelector, ); + const { scrollWrapperHTMLElement } = useScrollWrapperHTMLElement(); + + const scrollWrapperWidth = scrollWrapperHTMLElement?.clientWidth; + return ( - - - - - {props.title} - - - {props.subTitle} - - - {'buttonComponent' in props && props.buttonComponent} - {'buttonTitle' in props && - !isReadOnly && - !hasAnySoftDeleteFilterOnView && ( -