diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
new file mode 100644
index 000000000000..b8b8b2f61d5f
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
@@ -0,0 +1,16 @@
+import { Card } from '@/ui/layout/card/components/Card';
+import styled from '@emotion/styled';
+
+const StyledList = styled(Card)`
+ & > :not(:last-child) {
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+ }
+
+ width: calc(100% - 2px);
+
+ overflow: auto;
+`;
+
+export const ActivityList = ({ children }: React.PropsWithChildren) => {
+ return {children};
+};
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
new file mode 100644
index 000000000000..00fdbb1a68f8
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
@@ -0,0 +1,35 @@
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import styled from '@emotion/styled';
+import React from 'react';
+
+const StyledRowContent = styled(CardContent)<{
+ clickable?: boolean;
+}>`
+ align-items: center;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(2)};
+ height: ${({ theme }) => theme.spacing(12)};
+ padding: ${({ theme }) => theme.spacing(0, 4)};
+ cursor: ${({ clickable }) => (clickable === true ? 'pointer' : 'default')};
+`;
+
+export const ActivityRow = ({
+ children,
+ onClick,
+ disabled,
+}: React.PropsWithChildren<{
+ onClick?: (event: React.MouseEvent) => void;
+ disabled?: boolean;
+}>) => {
+ const handleClick = (event: React.MouseEvent) => {
+ if (disabled !== true) {
+ onClick?.(event);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index bb7f8c1407f4..cfa2aa672853 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -1,30 +1,15 @@
import styled from '@emotion/styled';
-import { useRef } from 'react';
import { useRecoilCallback } from 'recoil';
import { Avatar, GRAY_SCALE } from 'twenty-ui';
+import { ActivityRow } from '@/activities/components/ActivityRow';
import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
import { formatToHumanReadableDate } from '~/utils/date-utils';
-const StyledCardContent = styled(CardContent)<{
- visibility: MessageChannelVisibility;
-}>`
- align-items: center;
- display: flex;
- gap: ${({ theme }) => theme.spacing(2)};
- height: ${({ theme }) => theme.spacing(12)};
- padding: ${({ theme }) => theme.spacing(0, 4)};
- cursor: ${({ visibility }) =>
- visibility === MessageChannelVisibility.ShareEverything
- ? 'pointer'
- : 'default'};
-`;
-
const StyledHeading = styled.div<{ unread: boolean }>`
display: flex;
overflow: hidden;
@@ -82,16 +67,10 @@ const StyledReceivedAt = styled.div`
`;
type EmailThreadPreviewProps = {
- divider?: boolean;
thread: TimelineThread;
};
-export const EmailThreadPreview = ({
- divider,
- thread,
-}: EmailThreadPreviewProps) => {
- const cardRef = useRef(null);
-
+export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
const { openEmailThread } = useEmailThread();
const visibility = thread.visibility;
@@ -143,12 +122,12 @@ export const EmailThreadPreview = ({
],
);
+ const isDisabled = visibility !== MessageChannelVisibility.ShareEverything;
+
return (
- handleThreadClick(event)}
- divider={divider}
- visibility={visibility}
+ disabled={isDisabled}
>
@@ -201,6 +180,6 @@ export const EmailThreadPreview = ({
{formatToHumanReadableDate(thread.lastMessageReceivedAt)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
index 17f44524fea6..8a3eef7ea33f 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { H1Title, H1TitleFontColor } from 'twenty-ui';
+import { ActivityList } from '@/activities/components/ActivityList';
import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
@@ -18,7 +19,6 @@ import {
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
-import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
@@ -106,15 +106,11 @@ export const EmailThreads = ({
fontColor={H1TitleFontColor.Primary}
/>
{!firstQueryLoading && (
-
- {timelineThreads?.map((thread: TimelineThread, index: number) => (
-
+
+ {timelineThreads?.map((thread: TimelineThread) => (
+
))}
-
+
)}
theme.spacing(2, 6, 6)};
+
+ width: calc(100% - ${({ theme }) => theme.spacing(12)});
+
height: 100%;
`;
@@ -44,21 +48,11 @@ const StyledCount = styled.span`
margin-left: ${({ theme }) => theme.spacing(2)};
`;
-const StyledAttachmentContainer = styled.div`
- align-items: flex-start;
- align-self: stretch;
- background: ${({ theme }) => theme.background.secondary};
- border: 1px solid ${({ theme }) => theme.border.color.medium};
- border-radius: ${({ theme }) => theme.border.radius.md};
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- width: 100%;
-`;
-
const StyledDropZoneContainer = styled.div`
height: 100%;
width: 100%;
+
+ overflow: auto;
`;
export const AttachmentList = ({
@@ -91,11 +85,11 @@ export const AttachmentList = ({
onUploadFile={onUploadFile}
/>
) : (
-
+
{attachments.map((attachment) => (
))}
-
+
)}
diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
index 478cacc723e4..24a54e677ac5 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
@@ -1,3 +1,4 @@
+import { ActivityRow } from '@/activities/components/ActivityRow';
import { AttachmentDropdown } from '@/activities/files/components/AttachmentDropdown';
import { AttachmentIcon } from '@/activities/files/components/AttachmentIcon';
import { Attachment } from '@/activities/files/types/Attachment';
@@ -13,26 +14,19 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
-import { IconCalendar } from 'twenty-ui';
+import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';
import { formatToHumanReadableDate } from '~/utils/date-utils';
import { getFileAbsoluteURI } from '~/utils/file/getFileAbsoluteURI';
-const StyledRow = styled.div`
- align-items: center;
- align-self: stretch;
- border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
- color: ${({ theme }) => theme.font.color.primary};
- display: flex;
- justify-content: space-between;
- padding: ${({ theme }) => theme.spacing(2)};
- height: 32px;
-`;
-
const StyledLeftContent = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(3)};
+
+ width: 100%;
+ overflow: auto;
+ flex: 1;
`;
const StyledRightContent = styled.div`
@@ -52,11 +46,19 @@ const StyledLink = styled.a`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
text-decoration: none;
+
+ width: 100%;
+
:hover {
color: ${({ theme }) => theme.font.color.secondary};
}
`;
+const StyledLinkContainer = styled.div`
+ overflow: auto;
+ width: 100%;
+`;
+
export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
const theme = useTheme();
const [isEditing, setIsEditing] = useState(false);
@@ -97,7 +99,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
return (
-
+
{isEditing ? (
@@ -109,12 +111,14 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
fullWidth
/>
) : (
-
- {attachment.name}
-
+
+
+
+
+
)}
@@ -131,7 +135,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
onRename={handleRename}
/>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
index 10e7982ca04f..56082db0dc4c 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ReactElement } from 'react';
+import { ActivityList } from '@/activities/components/ActivityList';
import { Task } from '@/activities/types/Task';
import { TaskRow } from './TaskRow';
@@ -17,7 +18,9 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
- padding: 8px 24px;
+ padding: 8px ${({ theme }) => theme.spacing(6)};
+
+ width: calc(100% - ${({ theme }) => theme.spacing(12)});
`;
const StyledTitleBar = styled.div`
@@ -39,13 +42,6 @@ const StyledCount = styled.span`
margin-left: ${({ theme }) => theme.spacing(2)};
`;
-const StyledTaskRows = styled.div`
- background-color: ${({ theme }) => theme.background.secondary};
- border: 1px solid ${({ theme }) => theme.border.color.light};
- border-radius: ${({ theme }) => theme.border.radius.md};
- width: 100%;
-`;
-
export const TaskList = ({ title, tasks, button }: TaskListProps) => (
<>
{tasks && tasks.length > 0 && (
@@ -58,11 +54,11 @@ export const TaskList = ({ title, tasks, button }: TaskListProps) => (
)}
{button}
-
+
{tasks.map((task) => (
))}
-
+
)}
>
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
index efd4323143b0..fc68a1ee1ea9 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -8,28 +8,12 @@ import { getActivitySummary } from '@/activities/utils/getActivitySummary';
import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
+import { ActivityRow } from '@/activities/components/ActivityRow';
import { Task } from '@/activities/types/Task';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFieldContext } from '@/object-record/hooks/useFieldContext';
import { useCompleteTask } from '../hooks/useCompleteTask';
-const StyledContainer = styled.div`
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
- cursor: pointer;
- display: flex;
- height: ${({ theme }) => theme.spacing(12)};
- min-width: calc(100% - ${({ theme }) => theme.spacing(8)});
- max-width: calc(100% - ${({ theme }) => theme.spacing(8)});
- padding: 0 ${({ theme }) => theme.spacing(4)};
- overflow: hidden;
- max-inline-size: 60px;
- &:last-child {
- border-bottom: 0;
- }
-`;
-
const StyledTaskBody = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
@@ -105,7 +89,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
});
return (
- {
openActivityRightDrawer(task.id);
}}
@@ -150,6 +134,6 @@ export const TaskRow = ({ task }: { task: Task }) => {
{task.dueAt && beautifyExactDate(task.dueAt)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 6088034bbc7a..449963c0135b 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -37,12 +37,12 @@ import {
const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
display: flex;
- flex: 1 0 0;
flex-direction: column;
height: 100%;
justify-content: start;
width: 100%;
- position: relative;
+ height: 100%;
+ overflow: auto;
`;
const StyledTabListContainer = styled.div`
diff --git a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx
index a90160ea1301..8815ff456414 100644
--- a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx
@@ -28,6 +28,9 @@ export type Story = StoryObj;
export const WithStandardSelected: Story = {
play: async () => {
const canvas = within(document.body);
+
+ await canvas.findByText('New Object');
+
const listingInput = await canvas.findByPlaceholderText('Listing');
const pluralInput = await canvas.findByPlaceholderText('Listings');
const descriptionInput = await canvas.findByPlaceholderText(