Create old fields design widget (#15645)

In this PR:

- Pass `layoutMode` and `tabId` via PageLayoutContentContext provider
- Getting `pageLayoutType` from the current page layout
- Getting isInPinnedTab through `useIsInPinnedTab` hook

## Before

<img width="3456" height="2160" alt="CleanShot 2025-11-06 at 14 22
44@2x"
src="https://github.com/user-attachments/assets/763bb413-5739-45ef-85ed-82a72415886f"
/>

## After

<img width="3456" height="2162" alt="CleanShot 2025-11-06 at 14 20
38@2x"
src="https://github.com/user-attachments/assets/eee6cccd-9d36-426e-a22f-400e8f7f9413"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -2,30 +2,29 @@ import { PageLayoutCanvasViewer } from '@/page-layout/components/PageLayoutCanva
 import { PageLayoutGridLayout } from '@/page-layout/components/PageLayoutGridLayout';
 import { PageLayoutVerticalListEditor } from '@/page-layout/components/PageLayoutVerticalListEditor';
 import { PageLayoutVerticalListViewer } from '@/page-layout/components/PageLayoutVerticalListViewer';
+import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
 import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
 import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
+import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 import { FeatureFlagKey } from '~/generated/graphql';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isInPinnedTab: boolean }>`
   background: ${({ theme }) => theme.background.primary};
   box-sizing: border-box;
   flex: 1;
   min-height: 100%;
   position: relative;
-  padding: ${({ theme }) => theme.spacing(2)};
   width: 100%;
+  padding: ${({ theme, isInPinnedTab }) =>
+    isInPinnedTab ? 0 : theme.spacing(2)};
 `;
 
-type PageLayoutContentProps = {
-  tabId: string;
-};
-
-export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
+export const PageLayoutContent = () => {
   const isRecordPageEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_ENABLED,
   );
@@ -35,18 +34,21 @@ export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
   );
 
   const { currentPageLayout } = useCurrentPageLayout();
+  const { tabId } = usePageLayoutContentContext();
+
   const { reorderWidgets } = useReorderPageLayoutWidgets(tabId);
 
   const activeTab = currentPageLayout?.tabs.find((tab) => tab.id === tabId);
 
+  const { layoutMode } = usePageLayoutContentContext();
+  const { isInPinnedTab } = useIsInPinnedTab();
+
   if (!isDefined(currentPageLayout) || !isDefined(activeTab)) {
     return null;
   }
 
-  const isCanvasLayout =
-    isRecordPageEnabled && activeTab.layoutMode === 'canvas';
-  const isVerticalList =
-    isRecordPageEnabled && activeTab.layoutMode === 'vertical-list';
+  const isCanvasLayout = isRecordPageEnabled && layoutMode === 'canvas';
+  const isVerticalList = isRecordPageEnabled && layoutMode === 'vertical-list';
 
   if (isCanvasLayout) {
     return <PageLayoutCanvasViewer widgets={activeTab.widgets} />;
@@ -54,7 +56,7 @@ export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
 
   if (isVerticalList) {
     return (
-      <StyledContainer>
+      <StyledContainer isInPinnedTab={isInPinnedTab}>
         {isPageLayoutInEditMode ? (
           <PageLayoutVerticalListEditor
             widgets={activeTab.widgets}