diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
index cb74e760556..3d51a225b75 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
@@ -39,15 +39,17 @@ export const PageLayoutContent = () => {
}
if (isVerticalList) {
- return isPageLayoutInEditMode ? (
-
- ) : (
-
- );
+ if (!isRecordPageLayout && isPageLayoutInEditMode) {
+ return (
+
+ );
+ }
+
+ return ;
}
return ;
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 1d5f78d5127..1320c61b0b6 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
@@ -8,6 +8,7 @@ import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer'
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { WidgetType } from '~/generated-metadata/graphql';
const StyledVerticalListContainer = styled.div<{
variant: PageLayoutVerticalListViewerVariant;
@@ -25,6 +26,13 @@ const StyledVerticalListContainer = styled.div<{
variant === 'side-column' ? 0 : themeCssVariables.spacing[2]};
`;
+const StyledFieldsWidgetWrapper = styled.div<{
+ variant: PageLayoutVerticalListViewerVariant;
+}>`
+ padding: ${({ variant }) =>
+ variant === 'side-column' ? themeCssVariables.spacing[1] : '0'};
+`;
+
type PageLayoutVerticalListViewerProps = {
widgets: PageLayoutWidget[];
};
@@ -47,11 +55,17 @@ export const PageLayoutVerticalListViewer = ({
variant={variant}
shouldUseWhiteBackground={isMobile || isInSidePanel}
>
- {widgets.map((widget) => (
-
-
-
- ))}
+ {widgets.map((widget) =>
+ widget.type === WidgetType.FIELDS ? (
+
+
+
+ ) : (
+
+
+
+ ),
+ )}
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
index 8373cd54aeb..442bf64e94e 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
@@ -28,12 +28,12 @@ import { styled } from '@linaria/react';
import { type MouseEvent, useContext } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { IconLock } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme-constants';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated-metadata/graphql';
-import { ThemeContext } from 'twenty-ui/theme-constants';
const StyledNoAccessContainer = styled.div`
align-items: center;
@@ -89,6 +89,11 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
const isDeletingWidgetEnabled =
currentPageLayout.type !== PageLayoutType.RECORD_PAGE;
+ const isWidgetEditable =
+ isPageLayoutInEditMode &&
+ (currentPageLayout.type !== PageLayoutType.RECORD_PAGE ||
+ widget.type === WidgetType.FIELDS);
+
// TODO: when we have more widgets without headers, we should use a more generic approach to hide the header
// each widget type could have metadata (e.g., hasHeader: boolean or headerMode: 'always' | 'editOnly' | 'never')
const isRichTextWidget = widget.type === WidgetType.STANDALONE_RICH_TEXT;
@@ -137,8 +142,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
{
{
{hasAccess ? (