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-server/test/integration/metadata/suites/page-layout-tab/__snapshots__/successful-page-layout-tab-update.integration-spec.ts.snap

@@ -1,10 +1,24 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`Page layout tab update should succeed should update page layout tab layout mode 1`] = `
+{
+  "createdAt": Any<String>,
+  "deletedAt": null,
+  "id": Any<String>,
+  "layoutMode": "VERTICAL_LIST",
+  "pageLayoutId": Any<String>,
+  "position": 0,
+  "title": "Original Tab Title",
+  "updatedAt": Any<String>,
+}
+`;
+
 exports[`Page layout tab update should succeed should update page layout tab position 1`] = `
 {
   "createdAt": Any<String>,
   "deletedAt": null,
   "id": Any<String>,
+  "layoutMode": "GRID",
   "pageLayoutId": Any<String>,
   "position": 10,
   "title": "Original Tab Title",
@@ -17,6 +31,7 @@ exports[`Page layout tab update should succeed should update page layout tab tit
   "createdAt": Any<String>,
   "deletedAt": null,
   "id": Any<String>,
+  "layoutMode": "GRID",
   "pageLayoutId": Any<String>,
   "position": 0,
   "title": "Updated Tab Title",

packages/twenty-server/test/integration/metadata/suites/page-layout-tab/successful-page-layout-tab-update.integration-spec.ts

@@ -8,11 +8,13 @@ import {
   type EachTestingContext,
   eachTestingContextFilter,
 } from 'twenty-shared/testing';
+import { PageLayoutTabLayoutMode } from 'twenty-shared/types';
 
 type TestContext = {
   input: {
     title?: string;
     position?: number;
+    layoutMode?: PageLayoutTabLayoutMode;
   };
 };
 
@@ -33,6 +35,14 @@ const SUCCESSFUL_TEST_CASES: EachTestingContext<TestContext>[] = [
       },
     },
   },
+  {
+    title: 'update page layout tab layout mode',
+    context: {
+      input: {
+        layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
+      },
+    },
+  },
 ];
 
 describe('Page layout tab update should succeed', () => {

packages/twenty-server/test/integration/metadata/suites/page-layout-tab/utils/update-one-page-layout-tab-query-factory.util.ts

@@ -11,6 +11,7 @@ const DEFAULT_PAGE_LAYOUT_TAB_GQL_FIELDS = `
   id
   title
   position
+  layoutMode
   pageLayoutId
   createdAt
   updatedAt
@@ -34,6 +35,7 @@ export const updateOnePageLayoutTabQueryFactory = ({
       title: input.title,
       position: input.position,
       icon: input.icon,
+      layoutMode: input.layoutMode,
     },
   },
 });