diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
index 3c7a0134d..cad9c66e2 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
@@ -40,7 +40,7 @@ const StyledTopContainer = styled.div`
display: flex;
flex-direction: column;
gap: 24px;
- padding: 24px 24px 24px 48px;
+ padding: ${({ theme }) => theme.spacing(6)};
`;
type ActivityEditorProps = {
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx
index 4db2a8eef..126ce0de5 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
@@ -13,6 +14,10 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+const StyledPropertyBox = styled(PropertyBox)`
+ padding: 0;
+`;
+
export const ActivityEditorFields = ({
activityId,
}: {
@@ -69,7 +74,7 @@ export const ActivityEditorFields = ({
});
return (
-
+
{activity.type === 'Task' &&
DueAtFieldContextProvider &&
AssigneeFieldContextProvider && (
@@ -87,6 +92,6 @@ export const ActivityEditorFields = ({
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
index 28614c014..854d6eec4 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
@@ -1,9 +1,13 @@
import styled from '@emotion/styled';
-const StyledPropertyBoxContainer = styled.div`
+interface PropertyBoxProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export const StyledPropertyBoxContainer = styled.div`
align-self: stretch;
background: ${({ theme }) => theme.background.secondary};
- border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
flex-direction: column;
@@ -11,11 +15,8 @@ const StyledPropertyBoxContainer = styled.div`
padding: ${({ theme }) => theme.spacing(3)};
`;
-interface PropertyBoxProps {
- children: React.ReactNode;
- extraPadding?: boolean;
-}
-
-export const PropertyBox = ({ children }: PropertyBoxProps) => (
- {children}
+export const PropertyBox = ({ children, className }: PropertyBoxProps) => (
+
+ {children}
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 3067d4d1b..576b44ce5 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -169,7 +169,7 @@ export const RecordShowContainer = ({
objectNameSingular === 'person' ? onUploadPicture : undefined
}
/>
-
+
{inlineFieldMetadataItems.map((fieldMetadataItem, index) => (
`
align-items: center;
display: flex;
height: 24px;
margin-bottom: ${({ theme }) => theme.spacing(2)};
- padding: ${() => (useIsMobile() ? '0 12px' : 'unset')};
`;
const StyledTitle = styled.div`
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx
index 5458d2541..1d7b1067d 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardContent.tsx
@@ -27,7 +27,8 @@ const StyledCardContent = styled(CardContent)<{
gap: ${({ theme }) => theme.spacing(1)};
display: flex;
height: ${({ theme }) => theme.spacing(10)};
- padding: ${({ theme }) => theme.spacing(0, 2, 0, 3)};
+ padding: 0;
+ border: 0;
${({ isDropdownOpen, theme }) =>
isDropdownOpen
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx
index 49e84bb8d..ca54e981e 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection.tsx
@@ -21,7 +21,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { IconForbid, IconPencil, IconPlus } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { Card } from '@/ui/layout/card/components/Card';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@@ -34,16 +33,24 @@ const StyledAddDropdown = styled(Dropdown)`
`;
const StyledCardNoContent = styled.div`
- border: 1px solid ${({ theme }) => theme.border.color.medium};
- border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light};
-
align-items: center;
justify-content: center;
gap: ${({ theme }) => theme.spacing(2)};
display: flex;
height: ${({ theme }) => theme.spacing(10)};
- padding: ${({ theme }) => theme.spacing(0, 2)};
+ text-transform: capitalize;
+`;
+
+const StyledCard = styled.div`
+ color: ${({ theme }) => theme.font.color.secondary};
+ overflow: hidden;
+`;
+
+const StyledSection = styled(Section)`
+ padding: ${({ theme }) => theme.spacing(3)};
+ border-top: 1px solid ${({ theme }) => theme.border.color.light};
+ width: unset;
`;
export const RecordRelationFieldCardSection = () => {
@@ -134,7 +141,7 @@ export const RecordRelationFieldCardSection = () => {
const Icon = getIcon(relationObjectMetadataItem.icon);
return (
-
+
{
)}
{!!relationRecords.length && (
-
+
{relationRecords.slice(0, 5).map((relationRecord, index) => (
{
relationRecord={relationRecord}
/>
))}
-
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
index 4c83d666d..fa5d5c1e8 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
@@ -19,9 +19,6 @@ const StyledOuterContainer = styled.div`
const StyledInnerContainer = styled.div`
display: flex;
flex-direction: column;
- gap: ${({ theme }) => theme.spacing(6)};
- padding: ${({ theme }) => (useIsMobile() ? '12px 0' : theme.spacing(3))};
- padding-right: ${({ theme }) => (useIsMobile() ? 0 : theme.spacing(2))};
width: ${() => (useIsMobile() ? `100%` : '348px')};
`;
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
index 0665e3e69..680d5329f 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
@@ -25,7 +25,8 @@ const StyledShowPageSummaryCard = styled.div`
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
justify-content: center;
- padding: ${({ theme }) => theme.spacing(3)};
+ padding: ${({ theme }) => theme.spacing(4)};
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`;
const StyledInfoContainer = styled.div`