From e27a8b51079029cbd3fcd854307337ff8854a251 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Thu, 5 Mar 2026 23:02:32 +0100
Subject: [PATCH] Fix Workflow layout show page (#18447)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes the workflow show page being blank after the `styled(Component)`
removal in #18430.

- PR #18430 replaced `styled(PageBody)` with a plain `div` wrapper
(`StyledPageBodyForDesktopContainer`) around `PageBody`, but the wrapper
defaulted to `display: block`
- `PageBody`'s internal container uses `flex: 1 1 auto` to size itself,
which requires a flex parent — the block wrapper broke height
propagation, causing React Flow's container to have 0 height
- Added `display: flex; flex-direction: column` to both
`StyledPageBodyForDesktopContainer` and
`StyledPageBodyForMobileContainer` to restore the flex chain

## Test plan

- [x] Open a workflow record show page → diagram nodes are visible
- [x] Open a company/person record show page → fields, tabs, and content
render correctly
- [x] Lint and typecheck pass
---
 .../components/MainContainerLayoutWithSidePanel.tsx        | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
index fa9a2ce06c..22724a092b 100644
--- a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
@@ -20,7 +20,9 @@ const StyledMainContainerLayoutForDesktop = styled.div`
 `;
 
 const StyledPageBodyForDesktopContainer = styled.div`
+  display: flex;
   flex: 1 1 0;
+  flex-direction: column;
   min-width: 0;
   width: 0;
 
@@ -38,6 +40,11 @@ const StyledMainContainerLayoutForMobile = styled.div`
 `;
 
 const StyledPageBodyForMobileContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
   > * {
     padding-bottom: 0;
     padding-left: ${themeCssVariables.spacing[1]};