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
44.3 update
2025-03-17 11:14:12 +01:00 · 2025-03-17 11:13:50 +01:00 · 2025-03-14 19:27:58 +01:00
9 changed files with 19 additions and 11 deletions
@@ -1,6 +1,6 @@
 {
  "name": "twenty-e2e-testing",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "description": "",
  "author": "",
  "private": true,
@@ -1,6 +1,6 @@
 {
  "name": "twenty-emails",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "description": "",
  "author": "",
  "private": true,
@@ -1,6 +1,6 @@
 {
  "name": "twenty-front",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "private": true,
  "type": "module",
  "scripts": {
@@ -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()}
@@ -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>
  );
 };
@@ -1,6 +1,6 @@
 {
  "name": "twenty-server",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "description": "",
  "author": "",
  "private": true,
@@ -1,6 +1,6 @@
 {
  "name": "twenty-shared",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "license": "AGPL-3.0",
  "main": "./dist/index.js",
  "scripts": {
@@ -1,6 +1,6 @@
 {
  "name": "twenty-ui",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "type": "module",
  "main": "./src/index.ts",
  "exports": {
@@ -1,6 +1,6 @@
 {
  "name": "twenty-website",
-  "version": "0.44.0-canary",
+  "version": "0.44.3",
  "private": true,
  "scripts": {
    "nx": "NX_DEFAULT_PROJECT=twenty-website node ../../node_modules/nx/bin/nx.js",