From 5ddc34b182cbd145951180348b4ff5274a755903 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Wed, 12 Mar 2025 19:15:50 +0530 Subject: [PATCH] Tablist bottom margin fix (#10801) ### Bug The active tab bottom border appeared slightly above the TabList's light bottom border. ### Investigation - Initial fix: Adjusted margin-bottom to -1px in Tab component to align borders - This fix caused active bottom borders to disappear in tabs wrapped with ShowPageSubContainerTabListContainer - Found that ShowPageSubContainerTabListContainer was adding a redundant bottom border that overlapped with TabList's border ### Solution - Removed ShowPageSubContainerTabListContainer to eliminate the redundant border - Kept the -1px margin-bottom fix in Tab component - This ensures consistent border behavior across all TabList implementations --- .../CommandMenuWorkflowRunViewStep.tsx | 16 +++++++--------- .../components/ShowPageSubContainer.tsx | 9 ++++++--- .../ShowPageSubContainerTabListContainer.tsx | 13 ------------- .../src/modules/ui/layout/tab/components/Tab.tsx | 2 +- .../modules/ui/layout/tab/components/TabList.tsx | 2 +- .../RightDrawerWorkflowRunViewStep.tsx | 16 +++++++--------- .../WorkflowEditActionFormServerlessFunction.tsx | 16 +++++++--------- 7 files changed, 29 insertions(+), 45 deletions(-) delete mode 100644 packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainerTabListContainer.tsx diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx index 1ff2c7c74..b9a2ba38e 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx @@ -1,4 +1,3 @@ -import { ShowPageSubContainerTabListContainer } from '@/ui/layout/show-page/components/ShowPageSubContainerTabListContainer'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow'; @@ -16,8 +15,9 @@ import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared'; import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui'; -const StyledTabListContainer = styled(ShowPageSubContainerTabListContainer)` +const StyledTabList = styled(TabList)` background-color: ${({ theme }) => theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type TabId = 'node' | 'input' | 'output'; @@ -69,13 +69,11 @@ export const CommandMenuWorkflowRunViewStep = () => { - - - + {activeTabId === 'node' ? ( ` const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>` display: ${({ shouldDisplay }) => (shouldDisplay ? 'flex' : 'none')}; -`.withComponent(ShowPageSubContainerTabListContainer); +`; + +const StyledTabList = styled(TabList)` + padding-left: ${({ theme }) => theme.spacing(2)}; +`; const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>` flex: 1; @@ -122,7 +125,7 @@ export const ShowPageSubContainer = ({ )} 1}> - theme.spacing(2)}; - border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; - box-sizing: border-box; - display: flex; - gap: ${({ theme }) => theme.spacing(2)}; - height: 40px; -`; - -export { StyledTabListContainer as ShowPageSubContainerTabListContainer }; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 6474b4a9b..b11a0d295 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -41,7 +41,7 @@ const StyledTab = styled('button', { display: flex; gap: ${({ theme }) => theme.spacing(1)}; justify-content: center; - margin-bottom: 0; + margin-bottom: -1px; padding: ${({ theme }) => theme.spacing(2) + ' 0'}; pointer-events: ${({ disabled }) => (disabled ? 'none' : '')}; text-decoration: none; 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 f1794d7ea..78456c952 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 @@ -33,7 +33,7 @@ const StyledContainer = styled.div` border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; box-sizing: border-box; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(1)}; height: 40px; user-select: none; `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx index b9ffcc93c..999183855 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx @@ -1,4 +1,3 @@ -import { ShowPageSubContainerTabListContainer } from '@/ui/layout/show-page/components/ShowPageSubContainerTabListContainer'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow'; @@ -16,8 +15,9 @@ import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared'; import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui'; -const StyledTabListContainer = styled(ShowPageSubContainerTabListContainer)` +const StyledTabList = styled(TabList)` background-color: ${({ theme }) => theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type TabId = 'node' | 'input' | 'output'; @@ -69,13 +69,11 @@ export const RightDrawerWorkflowRunViewStep = () => { - - - + {activeTabId === 'node' ? ( theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type WorkflowEditActionFormServerlessFunctionProps = { @@ -285,13 +285,11 @@ export const WorkflowEditActionFormServerlessFunction = ({ return ( !loading && ( - - - + { updateAction({ name: newName });