admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[FIX] Text overflow on timeline (#8325)

Browse Source 
FIX: #6977 

Implementation:

1. Parent (Summary componenet) width is set to 100%. (dosen't grow even
if the child exceeds width)
2. span element is set to `text-overflow: ellipses` when overflown.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Hitarth Sheth
2024-11-08 13:20:41 -05:00
committed by GitHub
parent 6ec8a5b76e
commit e3e638579b
6 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/activities/timeline-activities/components/EventList.tsx
View File

@ -9,6 +9,7 @@ import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableE
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { MOBILE_VIEWPORT } from 'twenty-ui';
type EventListProps = {
targetableObject: ActivityTargetableObject;
@ -28,6 +29,10 @@ const StyledTimelineContainer = styled.div`
justify-content: flex-start;
width: calc(100% - ${({ theme }) => theme.spacing(8)});
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: calc(100% - ${({ theme }) => theme.spacing(2)});
}
`;
export const EventList = ({ events, targetableObject }: EventListProps) => {

5
packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx
View File

@ -11,6 +11,7 @@ import { TimelineActivity } from '@/activities/timeline-activities/types/Timelin
import { getTimelineActivityAuthorFullName } from '@/activities/timeline-activities/utils/getTimelineActivityAuthorFullName';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -62,6 +63,7 @@ const StyledSummary = styled.summary`
flex: 1;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>`
@ -77,6 +79,9 @@ const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>`
`;
const StyledItemTitleDate = styled.div`
@media (max-width: ${MOBILE_VIEWPORT}px) {
display: none;
}
align-items: flex-start;
padding-top: ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.font.color.tertiary};

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

@ -14,6 +14,7 @@ import {
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
MOBILE_VIEWPORT,
} from 'twenty-ui';
const StyledMainContainer = styled.div`
@ -31,6 +32,11 @@ const StyledMainContainer = styled.div`
padding-right: ${({ theme }) => theme.spacing(6)};
padding-left: ${({ theme }) => theme.spacing(6)};
gap: ${({ theme }) => theme.spacing(4)};
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
}
`;
export const TimelineActivities = ({