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

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()}

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>
   );
 };