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

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 = () => {
     <WorkflowStepContextProvider
       value={{ workflowVersionId: workflowRun.workflowVersionId }}
     >
-      <StyledTabListContainer>
-        <TabList
-          tabListInstanceId={WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID}
-          tabs={tabs}
-          behaveAsLinks={false}
-        />
-      </StyledTabListContainer>
+      <StyledTabList
+        tabListInstanceId={WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID}
+        tabs={tabs}
+        behaveAsLinks={false}
+      />
 
       {activeTabId === 'node' ? (
         <WorkflowStepDetail

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx

@@ -10,7 +10,6 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
-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 { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -29,7 +28,11 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
 
 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 = ({
       )}
       <StyledShowPageRightContainer isMobile={isMobile}>
         <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
-          <TabList
+          <StyledTabList
             behaveAsLinks={!isInRightDrawer}
             loading={loading || isNewViewableRecordLoading}
             tabListInstanceId={tabListComponentId}

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainerTabListContainer.tsx

@@ -1,13 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledTabListContainer = styled.div`
-  align-items: center;
-  padding-left: ${({ theme }) => 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 };

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;

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;
 `;

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 = () => {
     <WorkflowStepContextProvider
       value={{ workflowVersionId: flow.workflowVersionId }}
     >
-      <StyledTabListContainer>
-        <TabList
-          tabListInstanceId={WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID}
-          tabs={tabs}
-          behaveAsLinks={false}
-        />
-      </StyledTabListContainer>
+      <StyledTabList
+        tabListInstanceId={WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID}
+        tabs={tabs}
+        behaveAsLinks={false}
+      />
 
       {activeTabId === 'node' ? (
         <WorkflowStepDetail

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx

@@ -17,7 +17,6 @@ import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctio
 import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
-import { ShowPageSubContainerTabListContainer } from '@/ui/layout/show-page/components/ShowPageSubContainerTabListContainer';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
@@ -50,8 +49,9 @@ const StyledCodeEditorContainer = styled.div`
   flex-direction: column;
 `;
 
-const StyledTabListContainer = styled(ShowPageSubContainerTabListContainer)`
+const StyledTabList = styled(TabList)`
   background-color: ${({ theme }) => theme.background.secondary};
+  padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 type WorkflowEditActionFormServerlessFunctionProps = {
@@ -285,13 +285,11 @@ export const WorkflowEditActionFormServerlessFunction = ({
   return (
     !loading && (
       <StyledContainer>
-        <StyledTabListContainer>
-          <TabList
-            tabListInstanceId={tabListId}
-            tabs={tabs}
-            behaveAsLinks={false}
-          />
-        </StyledTabListContainer>
+        <StyledTabList
+          tabListInstanceId={tabListId}
+          tabs={tabs}
+          behaveAsLinks={false}
+        />
         <WorkflowStepHeader
           onTitleChange={(newName: string) => {
             updateAction({ name: newName });