diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
index e633420aaa..f176b9cb80 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
@@ -15,7 +15,6 @@ const StyledVerticalListContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
- padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledDraggableWrapper = styled.div<{ isDragging: boolean }>`
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
index 96ee60aa8e..3d12d0871d 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
@@ -6,7 +6,6 @@ const StyledVerticalListContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
- padding: ${({ theme }) => theme.spacing(2)};
`;
type PageLayoutVerticalListViewerProps = {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
index be8cc47ef8..cd18c58ebd 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
@@ -29,7 +29,6 @@ import {
} from 'twenty-ui/layout';
const StyledContainer = styled.div`
- padding: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
index d9b2ea17ac..ffea717ef8 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
@@ -21,7 +21,6 @@ import { useRecoilComponentState } from '@/ui/utilities/state/component-state/ho
import styled from '@emotion/styled';
const StyledContainer = styled.div`
- padding: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
index c5d97e2568..7908f7badc 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
@@ -4,7 +4,6 @@ import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions
import { useIsRecordReadOnly } from '@/object-record/read-only/hooks/useIsRecordReadOnly';
import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly';
import { RecordFieldsScopeContextProvider } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
-import { RecordDetailSectionContainer } from '@/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer';
import { RecordFieldListComponentInstanceContext } from '@/object-record/record-field-list/states/contexts/RecordFieldListComponentInstanceContext';
import { recordFieldListHoverPositionComponentState } from '@/object-record/record-field-list/states/recordFieldListHoverPositionComponentState';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
@@ -18,6 +17,7 @@ import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFi
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { FieldsWidgetCellEditModePortal } from '@/page-layout/widgets/fields/components/FieldsWidgetCellEditModePortal';
import { FieldsWidgetCellHoveredPortal } from '@/page-layout/widgets/fields/components/FieldsWidgetCellHoveredPortal';
+import { FieldsWidgetSectionContainer } from '@/page-layout/widgets/fields/components/FieldsWidgetSectionContainer';
import { useFieldsWidgetSectionsWithIndices } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetSectionsWithIndices';
import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
@@ -112,7 +112,7 @@ export const FieldsWidget = ({ widget }: FieldsWidgetProps) => {
}}
>
{sectionsWithFieldIndices.map((section) => (
-
@@ -182,7 +182,7 @@ export const FieldsWidget = ({ widget }: FieldsWidgetProps) => {
>
)}
-
+
))}
theme.spacing(3)};
+ padding-bottom: ${({ theme }) => theme.spacing(3)};
+ width: auto;
+`;
+
+const StyledHeader = styled.header`
+ align-items: center;
+ display: flex;
+ height: 24px;
+ justify-content: space-between;
+ padding-left: ${({ theme }) => theme.spacing(3)};
+ padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTitleLabel = styled.div`
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+type FieldsWidgetSectionContainerProps = {
+ children: React.ReactNode;
+ title: string;
+};
+
+export const FieldsWidgetSectionContainer = ({
+ children,
+ title,
+}: FieldsWidgetSectionContainerProps) => {
+ return (
+
+
+ {title}
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
index 598b01020c..7dee5c9b5b 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
@@ -79,6 +79,8 @@ const StyledWidgetCard = styled.div<{
if (variant === 'side-column' && !isEditable) {
return css`
background: ${theme.background.secondary};
+ padding: ${theme.spacing(2)};
+ border-bottom: 1px solid ${theme.border.color.light};
`;
}