Make page layout tab layoutMode diffable and default standalone pages to vertical list (#23596)

Reported on Discord: an app declared a `STANDALONE_PAGE` layout with one
`FRONT_COMPONENT` widget and got a small bordered card instead of a
full-bleed page, and setting `layoutMode` afterwards changed nothing.

Two bugs:

- `pageLayoutTab.layoutMode` was `toCompare: false`, so it was written
once at create and never diffed again. Changing it in a manifest and
redeploying was a silent no-op, and `updatePageLayoutTab(layoutMode:)`
was accepted by the API then dropped by the runner's update sanitizer.
- A manifest tab that omits `layoutMode` defaulted to `GRID` regardless
of page layout type, and a `GRID` tab always renders its widgets as
cards on a 12-column grid. Standalone pages now default to
`VERTICAL_LIST`, where a lone widget owns the tab.

Also fixes the SDK scaffolder (`twenty add page-layout` emitted a tab
with no `position`, which does not typecheck) and the docs claim that a
single widget is always full-bleed.

Worth knowing for review: this does not migrate workspaces holding
legacy `CANVAS` tabs. The standard-app sync only runs against a fresh
schema, so those rows stay `CANVAS` and keep rendering correctly through
the derived presentation.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23596?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-sdk/src/cli/utilities/entity/__tests__/get-page-layout-base-file.spec.ts

@@ -9,17 +9,28 @@ describe('getPageLayoutBaseFile', () => {
       type: PageLayoutType.STANDALONE_PAGE,
     });
 
-    expect(result).toContain(
-      "import { definePageLayout, PageLayoutType } from 'twenty-sdk/define';",
-    );
+    expect(result).toContain("} from 'twenty-sdk/define';");
+    expect(result).toContain('definePageLayout,');
     expect(result).toContain('export default definePageLayout({');
     expect(result).toContain("name: 'my-layout'");
     expect(result).toContain('type: PageLayoutType.STANDALONE_PAGE');
     expect(result).toContain("title: 'Overview'");
+    expect(result).toContain('position: 0');
     expect(result).toContain('widgets: []');
     expect(result).toContain('tabs: [');
   });
 
+  it('should render a standalone page tab in VERTICAL_LIST so a lone widget owns the page', () => {
+    const result = getPageLayoutBaseFile({
+      name: 'my-layout',
+      type: PageLayoutType.STANDALONE_PAGE,
+    });
+
+    expect(result).toContain(
+      'layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST',
+    );
+  });
+
   it('should render proper file with DASHBOARD type', () => {
     const result = getPageLayoutBaseFile({
       name: 'my-dashboard',
@@ -27,6 +38,7 @@ describe('getPageLayoutBaseFile', () => {
     });
 
     expect(result).toContain('type: PageLayoutType.DASHBOARD');
+    expect(result).toContain('layoutMode: PageLayoutTabLayoutMode.GRID');
   });
 
   it('should generate valid UUIDs for layout and tab', () => {

packages/twenty-sdk/src/cli/utilities/entity/entity-page-layout-template.ts

@@ -1,4 +1,4 @@
-import { type PageLayoutType } from 'twenty-shared/types';
+import { PageLayoutTabLayoutMode, PageLayoutType } from 'twenty-shared/types';
 import { v4 as uuidv4 } from 'uuid';
 
 export const getPageLayoutBaseFile = ({
@@ -8,7 +8,16 @@ export const getPageLayoutBaseFile = ({
   name: string;
   type: PageLayoutType;
 }) => {
-  return `import { definePageLayout, PageLayoutType } from 'twenty-sdk/define';
+  const layoutMode =
+    type === PageLayoutType.DASHBOARD
+      ? PageLayoutTabLayoutMode.GRID
+      : PageLayoutTabLayoutMode.VERTICAL_LIST;
+
+  return `import {
+  definePageLayout,
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+} from 'twenty-sdk/define';
 
 export default definePageLayout({
   universalIdentifier: '${uuidv4()}',
@@ -18,6 +27,8 @@ export default definePageLayout({
     {
       universalIdentifier: '${uuidv4()}',
       title: 'Overview',
+      position: 0,
+      layoutMode: PageLayoutTabLayoutMode.${layoutMode},
       widgets: [],
     },
   ],