Files
twenty/packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts
T
nitin 0b38b4ffc4 fix(page-layout): respect tab layoutMode on standalone pages (#20856)
Standalone-page tabs with `layoutMode: CANVAS` were silently rendering
as GRID (border, padding, scroll). Now they render full-bleed, matching
the CANVAS contract elsewhere.

Three layered fixes:
- `getTabLayoutMode`: respect `tab.layoutMode` for `STANDALONE_PAGE`
(was hardcoded to GRID for any non-`RECORD_PAGE`)
- `getWidgetCardVariant`: CANVAS now wins regardless of page type —
refactored to early-return + exhaustive switch on `pageLayoutType`
- `FrontComponentWidgetRenderer`: removed hardcoded `overflow: auto`
(workflow/tasks/timeline widgets don't have it either)

New `getTabLayoutMode.test.ts`. Variant tests refactored to declarative
+ parameterized.

QA:

<img width="3024" height="1654" alt="CleanShot 2026-05-22 at 20 46
50@2x"
src="https://github.com/user-attachments/assets/cc61d459-6bc6-48de-ac79-d63a2ccd8957"
/>


https://github.com/user-attachments/assets/a3374e18-ad1b-4888-ab2b-d07730edccac
2026-05-25 11:59:31 +00:00

28 lines
772 B
TypeScript

import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { assertPageLayoutTabHasDefinedLayoutModeOrThrow } from '@/page-layout/utils/assertPageLayoutTabHasDefinedLayoutModeOrThrow';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
} from '~/generated-metadata/graphql';
type GetTabLayoutModeParams = {
tab: PageLayoutTab | undefined;
pageLayoutType: PageLayoutType;
};
export const getTabLayoutMode = ({
tab,
pageLayoutType,
}: GetTabLayoutModeParams): PageLayoutTabLayoutMode => {
if (
pageLayoutType === PageLayoutType.RECORD_PAGE ||
pageLayoutType === PageLayoutType.STANDALONE_PAGE
) {
assertPageLayoutTabHasDefinedLayoutModeOrThrow(tab);
return tab.layoutMode;
}
return PageLayoutTabLayoutMode.GRID;
};