Fix add more tab bottom separator (#18529)

Adding a full height prop

Before 
<img width="409" height="139" alt="Capture d’écran 2026-03-10 à 14 06
13"
src="https://github.com/user-attachments/assets/6f9bb8d1-8834-44b9-a0cf-1253dffc9ea0"
/>

After
<img width="409" height="139" alt="Capture d’écran 2026-03-10 à 14 06
33"
src="https://github.com/user-attachments/assets/1d3551fe-0b4b-4bbf-88e4-fd466c9bb704"
/>

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -15,7 +15,6 @@ import { type DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { type GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import { styled } from '@linaria/react';
 import {
   type Placement,
   autoUpdate,
@@ -24,6 +23,7 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react';
+import { styled } from '@linaria/react';
 import { type MouseEvent, type ReactNode, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { type Keys } from 'react-hotkeys-hook';

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx

@@ -1,5 +1,6 @@
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
+import { TAB_LIST_HEIGHT } from '@/ui/layout/tab-list/constants/TabListHeight';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
 import { type TabListProps } from '@/ui/layout/tab-list/types/TabListProps';
@@ -18,7 +19,7 @@ import { TabListFromUrlOptionalEffect } from './TabListFromUrlOptionalEffect';
 const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
-  height: ${themeCssVariables.spacing[10]};
+  height: ${TAB_LIST_HEIGHT};
   position: relative;
   user-select: none;
   width: 100%;

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx

@@ -1,7 +1,15 @@
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconChevronDown } from 'twenty-ui/display';
 import { TabButton } from 'twenty-ui/input';
 
+import { TAB_LIST_HEIGHT } from '@/ui/layout/tab-list/constants/TabListHeight';
+
+const StyledTabMoreButtonContainer = styled.div`
+  display: flex;
+  height: ${TAB_LIST_HEIGHT};
+`;
+
 export const TabMoreButton = ({
   hiddenTabsCount,
   active,
@@ -12,12 +20,14 @@ export const TabMoreButton = ({
   className?: string;
 }) => {
   return (
-    <TabButton
-      id="tab-more-button"
-      active={active}
-      title={`+${hiddenTabsCount} ${t`More`}`}
-      RightIcon={IconChevronDown}
-      className={className}
-    />
+    <StyledTabMoreButtonContainer>
+      <TabButton
+        id="tab-more-button"
+        active={active}
+        title={`+${hiddenTabsCount} ${t`More`}`}
+        RightIcon={IconChevronDown}
+        className={className}
+      />
+    </StyledTabMoreButtonContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/tab-list/constants/TabListHeight.ts

@@ -0,0 +1,3 @@
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+export const TAB_LIST_HEIGHT = themeCssVariables.spacing[10];