Fix: Timeline responsiveness (#11288)

Fixes #11136 [recording.webm](https://github.com/user-attachments/assets/328afab8-511a-4090-bdb0-e1cdb42565be)
2025-04-02 13:37:05 +05:30
parent 44bf393b06
commit 9a2f7d8b71
6 changed files with 140 additions and 53 deletions
--- a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx
@ -13,7 +13,6 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

@ -80,19 +79,6 @@ const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>`
  min-height: 26px;
 `;

-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};
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  justify-content: flex-end;
-  margin-left: auto;
-`;
-
 type EventRowProps = {
  mainObjectMetadataItem: ObjectMetadataItem | null;
  isLastEvent?: boolean;
@ -164,12 +150,10 @@ export const EventRow = ({
              event={event}
              mainObjectMetadataItem={mainObjectMetadataItem}
              linkedObjectMetadataItem={linkedObjectMetadataItem}
+              createdAt={beautifiedCreatedAt}
            />
          </StyledSummary>
        </StyledItemContainer>
-        <StyledItemTitleDate id={`id-${event.id}`}>
-          {beautifiedCreatedAt}
-        </StyledItemTitleDate>
      </StyledTimelineItemContainer>
    </>
  );
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx
@ -9,6 +9,7 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { isNonEmptyString } from '@sniptt/guards';
+import { MOBILE_VIEWPORT, OverflowingTextWithTooltip } from 'twenty-ui';

 type EventRowActivityProps = EventRowDynamicComponentProps;

@ -22,6 +23,35 @@ const StyledLinkedActivity = styled.span`
  white-space: nowrap;
 `;

+const StyledRowContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: space-between;
+`;
+
+const StyledEventRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledRow = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
+`;
+
+const StyledItemTitleDate = styled.div`
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: none;
+  }
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+`;
+
 export const StyledEventRowItemText = styled.span`
  color: ${({ theme }) => theme.font.color.primary};
 `;
@ -30,6 +60,7 @@ export const EventRowActivity = ({
  event,
  authorFullName,
  objectNameSingular,
+  createdAt,
 }: EventRowActivityProps & { objectNameSingular: CoreObjectNameSingular }) => {
  const [eventLinkedObject, eventAction] = event.name.split('.');

@ -58,21 +89,26 @@ export const EventRowActivity = ({
  const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();

  return (
-    <>
-      <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-      <StyledEventRowItemAction>
-        {`${eventAction} a related ${eventObject}`}
-      </StyledEventRowItemAction>
-      <StyledLinkedActivity
-        onClick={() =>
-          openRecordInCommandMenu({
-            recordId: event.linkedRecordId,
-            objectNameSingular,
-          })
-        }
-      >
-        {activityTitle}
-      </StyledLinkedActivity>
-    </>
+    <StyledEventRow>
+      <StyledRowContainer>
+        <StyledRow>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+          <StyledEventRowItemAction>
+            {`${eventAction} a related ${eventObject}`}
+          </StyledEventRowItemAction>
+          <StyledLinkedActivity
+            onClick={() =>
+              openRecordInCommandMenu({
+                recordId: event.linkedRecordId,
+                objectNameSingular,
+              })
+            }
+          >
+            <OverflowingTextWithTooltip text={activityTitle} />
+          </StyledLinkedActivity>
+        </StyledRow>
+        <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
+      </StyledRowContainer>
+    </StyledEventRow>
  );
 };
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
@ -26,7 +26,7 @@ const StyledCard = styled(Card)`
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
  border-radius: ${({ theme }) => theme.border.radius.md};
-
+  box-sizing: border-box;
  display: flex;
  padding: ${({ theme }) => theme.spacing(2)};
  flex-direction: column;
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx
@ -14,6 +14,7 @@ export interface EventRowDynamicComponentProps {
  mainObjectMetadataItem: ObjectMetadataItem;
  linkedObjectMetadataItem: ObjectMetadataItem | null;
  authorFullName: string;
+  createdAt?: string;
 }

 export const StyledEventRowItemColumn = styled.div`
@ -34,6 +35,7 @@ export const EventRowDynamicComponent = ({
  mainObjectMetadataItem,
  linkedObjectMetadataItem,
  authorFullName,
+  createdAt,
 }: EventRowDynamicComponentProps) => {
  switch (linkedObjectMetadataItem?.nameSingular) {
    case 'calendarEvent':
@ -65,6 +67,7 @@ export const EventRowDynamicComponent = ({
          linkedObjectMetadataItem={linkedObjectMetadataItem}
          authorFullName={authorFullName}
          objectNameSingular={CoreObjectNameSingular.Task}
+          createdAt={createdAt}
        />
      );
    case 'note':
@ -76,6 +79,7 @@ export const EventRowDynamicComponent = ({
          linkedObjectMetadataItem={linkedObjectMetadataItem}
          authorFullName={authorFullName}
          objectNameSingular={CoreObjectNameSingular.Note}
+          createdAt={createdAt}
        />
      );
    default:
@ -86,6 +90,7 @@ export const EventRowDynamicComponent = ({
          mainObjectMetadataItem={mainObjectMetadataItem}
          linkedObjectMetadataItem={linkedObjectMetadataItem}
          authorFullName={authorFullName}
+          createdAt={createdAt}
        />
      );
  }
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx
@ -5,13 +5,37 @@ import {
 } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT } from 'twenty-ui';

 type EventRowMainObjectProps = EventRowDynamicComponentProps;

 const StyledMainContainer = styled.div`
  display: flex;
-  flex-direction: row;
+  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledRowContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: space-between;
+`;
+
+const StyledItemTitleDate = styled.div`
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: none;
+  }
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledRow = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
 `;

 export const EventRowMainObject = ({
@ -19,6 +43,7 @@ export const EventRowMainObject = ({
  labelIdentifierValue,
  event,
  mainObjectMetadataItem,
+  createdAt,
 }: EventRowMainObjectProps) => {
  const [, eventAction] = event.name.split('.');

@ -26,11 +51,20 @@ export const EventRowMainObject = ({
    case 'created': {
      return (
        <StyledMainContainer>
-          <StyledEventRowItemColumn>
-            {labelIdentifierValue}
-          </StyledEventRowItemColumn>
-          <StyledEventRowItemAction>was created by</StyledEventRowItemAction>
-          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+          <StyledRowContainer>
+            <StyledRow>
+              <StyledEventRowItemColumn>
+                {labelIdentifierValue}
+              </StyledEventRowItemColumn>
+              <StyledEventRowItemAction>
+                was created by
+              </StyledEventRowItemAction>
+              <StyledEventRowItemColumn>
+                {authorFullName}
+              </StyledEventRowItemColumn>
+            </StyledRow>
+            <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
+          </StyledRowContainer>
        </StyledMainContainer>
      );
    }
@ -41,17 +75,27 @@ export const EventRowMainObject = ({
          labelIdentifierValue={labelIdentifierValue}
          event={event}
          mainObjectMetadataItem={mainObjectMetadataItem}
+          createdAt={createdAt}
        />
      );
    }
    case 'deleted': {
      return (
        <StyledMainContainer>
-          <StyledEventRowItemColumn>
-            {labelIdentifierValue}
-          </StyledEventRowItemColumn>
-          <StyledEventRowItemAction>was deleted by</StyledEventRowItemAction>
-          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+          <StyledRowContainer>
+            <StyledRow>
+              <StyledEventRowItemColumn>
+                {labelIdentifierValue}
+              </StyledEventRowItemColumn>
+              <StyledEventRowItemAction>
+                was deleted by
+              </StyledEventRowItemAction>
+              <StyledEventRowItemColumn>
+                {authorFullName}
+              </StyledEventRowItemColumn>
+            </StyledRow>
+            <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
+          </StyledRowContainer>
        </StyledMainContainer>
      );
    }
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx
@ -3,32 +3,48 @@ import { useState } from 'react';

 import { EventCard } from '@/activities/timeline-activities/rows/components/EventCard';
 import { EventCardToggleButton } from '@/activities/timeline-activities/rows/components/EventCardToggleButton';
-import {
-  StyledEventRowItemAction,
-  StyledEventRowItemColumn,
-} from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
+import { StyledEventRowItemColumn } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
 import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffContainer';
 import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { MOBILE_VIEWPORT } from 'twenty-ui';

 type EventRowMainObjectUpdatedProps = {
  mainObjectMetadataItem: ObjectMetadataItem;
  authorFullName: string;
  labelIdentifierValue: string;
  event: TimelineActivity;
+  createdAt?: string;
 };

 const StyledRowContainer = styled.div`
+  align-items: center;
  display: flex;
-  flex-direction: row;
  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: space-between;
+`;
+
+const StyledItemTitleDate = styled.div`
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: none;
+  }
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledRow = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
 `;

 const StyledEventRowMainObjectUpdatedContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
 `;

 export const EventRowMainObjectUpdated = ({
@ -36,6 +52,7 @@ export const EventRowMainObjectUpdated = ({
  labelIdentifierValue,
  event,
  mainObjectMetadataItem,
+  createdAt,
 }: EventRowMainObjectUpdatedProps) => {
  const diff: Record<string, { before: any; after: any }> =
    event.properties?.diff;
@ -56,8 +73,8 @@ export const EventRowMainObjectUpdated = ({
  return (
    <StyledEventRowMainObjectUpdatedContainer>
      <StyledRowContainer>
-        <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
-        <StyledEventRowItemAction>
+        <StyledRow>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
          updated
          {diffEntries.length === 1 && (
            <EventFieldDiffContainer
@ -76,7 +93,8 @@ export const EventRowMainObjectUpdated = ({
              <EventCardToggleButton isOpen={isOpen} setIsOpen={setIsOpen} />
            </>
          )}
-        </StyledEventRowItemAction>
+        </StyledRow>
+        <StyledItemTitleDate>{createdAt}</StyledItemTitleDate>
      </StyledRowContainer>
      {diffEntries.length > 1 && (
        <EventCard isOpen={isOpen}>