Correctly separate widgets in side-column mode. (#16804)

Had to close the other PR since I messed up re-basing somehow:
https://github.com/twentyhq/twenty/pull/16668/files.

Moved changes to this new PR in order to resolve comments from the
previous PR and also match the field-design to that on Figma.

---------

Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>

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

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 = {

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

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

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) => (
-            <RecordDetailSectionContainer
+            <FieldsWidgetSectionContainer
               key={section.id}
               title={section.title}
             >
@@ -182,7 +182,7 @@ export const FieldsWidget = ({ widget }: FieldsWidgetProps) => {
                   </>
                 )}
               </PropertyBox>
-            </RecordDetailSectionContainer>
+            </FieldsWidgetSectionContainer>
           ))}
 
           <FieldsWidgetCellHoveredPortal

packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import { Section } from 'twenty-ui/layout';
+
+const StyledFieldsWidgetSectionContainer = styled(Section)`
+  padding-top: ${({ theme }) => 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 (
+    <StyledFieldsWidgetSectionContainer>
+      <StyledHeader>
+        <StyledTitleLabel>{title}</StyledTitleLabel>
+      </StyledHeader>
+      {children}
+    </StyledFieldsWidgetSectionContainer>
+  );
+};

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