From bd7e7713e8976126321dc3990f1365500478458f Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:57:23 +0530
Subject: [PATCH] fix workflow view not visible  (#10918)

fixes: #10913

1. Original issue:
```typescript
<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
  <StyledTabList />
</StyledTabListContainer>
```

TabList wasn't getting full width.

2. First fix attempt ie #10904:
```typescript
{visibleTabs.length > 1 && (
  <StyledTabList />
)}
```
This broke workflow views because:
Workflows use single-tab layouts
The conditional rendering prevented the tab from showing at all when
visibleTabs.length <= 1


3. Current working solution:
```typescript
const StyledOuterContainer = styled.div`
  width: 100%;
`;

<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
  <StyledOuterContainer>
    <StyledTabList />
  </StyledOuterContainer>
</StyledTabListContainer>
```
This works because:
Keeps the original display logic that supports single-tab workflows
Fixes the width issue with the new container
Maintains tab state management needed for workflow visualization
---
 .../layout/show-page/components/ShowPageSubContainer.tsx  | 8 ++++++--
 .../src/modules/ui/layout/tab/components/TabList.tsx      | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
index d7e55d3c9..b6eed4356 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
@@ -26,6 +26,10 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   overflow: auto;
 `;
 
+const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>`
+  display: ${({ shouldDisplay }) => (shouldDisplay ? 'flex' : 'none')};
+`;
+
 const StyledTabList = styled(TabList)`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
@@ -120,7 +124,7 @@ export const ShowPageSubContainer = ({
         </ShowPageLeftContainer>
       )}
       <StyledShowPageRightContainer isMobile={isMobile}>
-        {visibleTabs.length > 1 && (
+        <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
           <StyledTabList
             behaveAsLinks={!isInRightDrawer}
             loading={loading || isNewViewableRecordLoading}
@@ -128,7 +132,7 @@ export const ShowPageSubContainer = ({
             tabs={tabs}
             isInRightDrawer={isInRightDrawer}
           />
-        )}
+        </StyledTabListContainer>
         {(isMobile || isInRightDrawer) && summaryCard}
         <StyledContentContainer isInRightDrawer={isInRightDrawer}>
           {renderActiveTabContent()}
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
index 47ae16fee..8378a0400 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@@ -38,6 +38,10 @@ const StyledContainer = styled.div`
   user-select: none;
 `;
 
+const StyledOuterContainer = styled.div`
+  width: 100%;
+`;
+
 export const TabList = ({
   tabs,
   tabListInstanceId,
@@ -61,7 +65,7 @@ export const TabList = ({
   }
 
   return (
-    <div>
+    <StyledOuterContainer>
       <TabListScope tabListScopeId={tabListInstanceId}>
         <TabListFromUrlOptionalEffect
           isInRightDrawer={!!isInRightDrawer}
@@ -95,6 +99,6 @@ export const TabList = ({
           </StyledContainer>
         </ScrollWrapper>
       </TabListScope>
-    </div>
+    </StyledOuterContainer>
   );
 };