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 ? (