[FIX] Text overflow on timeline (twentyhq#8325)

FIX: twentyhq#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 <[email protected]>
harshit078 · Nov 8, 2024 · e3e6385 · e3e6385
1 parent 6ec8a5b
commit e3e6385
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventList.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventList.tsx
@@ -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) => {

diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx
@@ -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};

diff --git a/...twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx b/...twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx
@@ -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 = ({

diff --git a/.../src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx b/.../src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx
@@ -16,6 +16,10 @@ const StyledLinkedActivity = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   text-decoration: underline;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const StyledEventRowItemText = styled.span`

diff --git a/...ges/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/...ges/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from 'twenty-ui';
+import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
 
 type EventCardProps = {
   children: React.ReactNode;
@@ -16,6 +16,10 @@ const StyledCardContainer = styled.div`
   width: 400px;
   padding: ${({ theme }) => theme.spacing(2)} 0px
     ${({ theme }) => theme.spacing(1)} 0px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 300px;
+  }
 `;
 
 const StyledCard = styled(Card)`

diff --git a/...src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx b/...src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx
@@ -20,7 +20,10 @@ const StyledEventFieldDiffContainer = styled.div`
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
   height: 24px;
-  width: 380px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledEmptyValue = styled.div`