Keep fallback record page layouts read-only in edition mode (#20023)

When a record has no associated `pageLayoutId`, the FE falls back to a
hardcoded default page layout (`DEFAULT_*_RECORD_PAGE_LAYOUT`). These
mocks use non-UUID ids for the layout, tabs, and widgets
(e.g. `default-person-page-layout`).

Today nothing distinguishes these fallbacks from real layouts at edit
time. Clicking "Edit layout" flips the global customization mode,
`PageLayoutRecordPageCustomizationSessionRegistrationEffect` registers
the mock id, and on Save `useSaveLayoutCustomization` fires
`UpdatePageLayoutWithTabsAndWidgets` with those mock ids — the BE
rejects them and we end up in a partial-save state (nav / command menu
commit while the page layout fails).

This PR keeps fallback record page layouts in read mode even when
global layout-edition mode is on, and defends the save loop so mock
ids can never be sent to the BE.

## Non editable "base" record page layout (=mock)
<img width="1508" height="616" alt="Screenshot 2026-04-24 at 10 35 02"
src="https://github.com/user-attachments/assets/34b093d1-f4bb-4076-ab8c-ce97ecb945a4"
/>

## Editable record page layout
<img width="1512" height="597" alt="Screenshot 2026-04-24 at 10 35 20"
src="https://github.com/user-attachments/assets/5ff6f3ff-79a5-4e6f-aa1c-01c7e09273b3"
/>

Author: Weiko

packages/twenty-front/src/modules/layout-customization/hooks/useSaveLayoutCustomization.ts

@@ -16,6 +16,7 @@ import { type DraftPageLayout } from '@/page-layout/types/DraftPageLayout';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
 import { convertPageLayoutDraftToUpdateInput } from '@/page-layout/utils/convertPageLayoutDraftToUpdateInput';
 import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
+import { isDefaultPageLayoutId } from '@/page-layout/utils/isDefaultPageLayoutId';
 import { reInjectDynamicRelationWidgetsFromDraft } from '@/page-layout/utils/reInjectDynamicRelationWidgetsFromDraft';
 import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -76,6 +77,10 @@ export const useSaveLayoutCustomization = () => {
       let hasAnyFailure = false;
 
       for (const pageLayoutId of activePageLayoutIds) {
+        if (isDefaultPageLayoutId(pageLayoutId)) {
+          continue;
+        }
+
         const draft = store.get(
           pageLayoutDraftComponentState.atomFamily({
             instanceId: pageLayoutId,

packages/twenty-front/src/modules/page-layout/components/PageLayoutEditModeProvider.tsx

@@ -25,7 +25,7 @@ export const PageLayoutEditModeProvider = ({
 
   if (layoutType === PageLayoutType.RECORD_PAGE) {
     return (
-      <RecordPageLayoutEditModeProvider>
+      <RecordPageLayoutEditModeProvider pageLayoutId={pageLayoutId}>
         {children}
       </RecordPageLayoutEditModeProvider>
     );

packages/twenty-front/src/modules/page-layout/components/PageLayoutRecordPageCustomizationSessionRegistrationEffect.tsx

@@ -1,6 +1,7 @@
 import { activeCustomizationPageLayoutIdsState } from '@/layout-customization/states/activeCustomizationPageLayoutIdsState';
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
+import { isDefaultPageLayoutId } from '@/page-layout/utils/isDefaultPageLayoutId';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useStore } from 'jotai';
@@ -31,6 +32,10 @@ export const PageLayoutRecordPageCustomizationSessionRegistrationEffect =
         return;
       }
 
+      if (isDefaultPageLayoutId(pageLayoutPersisted.id)) {
+        return;
+      }
+
       store.set(activeCustomizationPageLayoutIdsState.atom, (activeIds) =>
         activeIds.includes(pageLayoutPersisted.id)
           ? activeIds

packages/twenty-front/src/modules/page-layout/components/RecordPageLayoutEditModeProvider.tsx

@@ -1,14 +1,17 @@
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
 import { PageLayoutEditModeProviderContext } from '@/page-layout/contexts/PageLayoutEditModeContext';
+import { isDefaultPageLayoutId } from '@/page-layout/utils/isDefaultPageLayoutId';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type ReactNode } from 'react';
 
 type RecordPageLayoutEditModeProviderProps = {
+  pageLayoutId: string;
   children: ReactNode;
 };
 
 export const RecordPageLayoutEditModeProvider = ({
+  pageLayoutId,
   children,
 }: RecordPageLayoutEditModeProviderProps) => {
   const isLayoutCustomizationModeEnabled = useAtomStateValue(
@@ -17,10 +20,13 @@ export const RecordPageLayoutEditModeProvider = ({
 
   const { isInSidePanel } = useLayoutRenderingContext();
 
+  const isEditable = !isDefaultPageLayoutId(pageLayoutId);
+
   return (
     <PageLayoutEditModeProviderContext
       value={{
-        isInEditMode: isLayoutCustomizationModeEnabled && !isInSidePanel,
+        isInEditMode:
+          isLayoutCustomizationModeEnabled && !isInSidePanel && isEditable,
       }}
     >
       {children}

packages/twenty-front/src/modules/page-layout/hooks/useBasePageLayout.ts

@@ -20,6 +20,7 @@ import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT } from '@/page-layout/constants/De
 import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowVersionPageLayoutId';
 import { recordPageLayoutFromIdFamilySelector } from '@/page-layout/states/selectors/recordPageLayoutFromIdFamilySelector';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
+import { isDefaultPageLayoutId } from '@/page-layout/utils/isDefaultPageLayoutId';
 import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { useQuery } from '@apollo/client/react';
@@ -52,22 +53,10 @@ const getDefaultLayoutById = (layoutId: string): PageLayout => {
   }
 };
 
-const isDefaultLayoutId = (layoutId: string): boolean =>
-  layoutId === DEFAULT_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_WORKFLOW_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID ||
-  layoutId === DEFAULT_MESSAGE_THREAD_RECORD_PAGE_LAYOUT_ID;
-
 export const useBasePageLayout = (
   pageLayoutId: string,
 ): PageLayout | undefined => {
-  const isDefaultLayout = isDefaultLayoutId(pageLayoutId);
+  const isDefaultLayout = isDefaultPageLayoutId(pageLayoutId);
 
   const cachedRecordPageLayout = useAtomFamilySelectorValue(
     recordPageLayoutFromIdFamilySelector,

packages/twenty-front/src/modules/page-layout/utils/isDefaultPageLayoutId.ts

@@ -0,0 +1,26 @@
+import { DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultCompanyRecordPageLayoutId';
+import { DEFAULT_MESSAGE_THREAD_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultMessageThreadRecordPageLayoutId';
+import { DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultNoteRecordPageLayoutId';
+import { DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultOpportunityRecordPageLayoutId';
+import { DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultPersonRecordPageLayoutId';
+import { DEFAULT_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultRecordPageLayoutId';
+import { DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultTaskRecordPageLayoutId';
+import { DEFAULT_WORKFLOW_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowPageLayoutId';
+import { DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowRunPageLayoutId';
+import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowVersionPageLayoutId';
+
+const DEFAULT_PAGE_LAYOUT_IDS = new Set<string>([
+  DEFAULT_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
+  DEFAULT_WORKFLOW_PAGE_LAYOUT_ID,
+  DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID,
+  DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID,
+  DEFAULT_MESSAGE_THREAD_RECORD_PAGE_LAYOUT_ID,
+]);
+
+export const isDefaultPageLayoutId = (pageLayoutId: string): boolean =>
+  DEFAULT_PAGE_LAYOUT_IDS.has(pageLayoutId);