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}; `; }