fix: vertical alignment of +N More tab overflow button (#18446)

## Summary
- Add `align-items: center` to tab list `StyledContainer` so the
overflow button aligns vertically with tabs
- Remove ineffective `> * { height }` hack from `TabMoreButton` (was
being reset by `all: unset` in `StyledTabButton`)

## Test plan
- Open a record detail page with enough tabs to trigger the "+N More"
overflow
- Verify the overflow button is vertically centered with the visible
tabs

packages/twenty-front/src/modules/activities/components/ActivityRow.tsx

@@ -4,13 +4,17 @@ import { CardContent } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRowContentContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  height: ${themeCssVariables.spacing[12]};
-  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]};
+  > div {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: ${themeCssVariables.spacing[2]};
+    height: ${themeCssVariables.spacing[12]};
+    overflow: hidden;
+    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]};
+  }
 
-  > *[data-clickable='false'] {
+  > div[data-clickable='false'] {
     cursor: default;
   }
 `;

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx

@@ -68,6 +68,11 @@ const StyledContainer = styled.div`
   }
 `;
 
+const StyledDropdownContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
 const StyledAddButton = styled.div`
   display: flex;
   align-items: center;
@@ -366,18 +371,20 @@ export const PageLayoutTabList = ({
               />
 
               {shouldRenderReorderableDropdown && (
-                <PageLayoutTabListReorderableOverflowDropdown
-                  dropdownId={dropdownId}
-                  hiddenTabs={hiddenTabs}
-                  hiddenTabsCount={hiddenTabsCount}
-                  isActiveTabHidden={isActiveTabHidden}
-                  activeTabId={activeTabId || ''}
-                  loading={loading}
-                  onSelect={handleSelectTabFromDropdown}
-                  visibleTabCount={visibleTabCount}
-                  onClose={closeOverflowDropdown}
-                  pageLayoutType={pageLayoutType}
-                />
+                <StyledDropdownContainer>
+                  <PageLayoutTabListReorderableOverflowDropdown
+                    dropdownId={dropdownId}
+                    hiddenTabs={hiddenTabs}
+                    hiddenTabsCount={hiddenTabsCount}
+                    isActiveTabHidden={isActiveTabHidden}
+                    activeTabId={activeTabId || ''}
+                    loading={loading}
+                    onSelect={handleSelectTabFromDropdown}
+                    visibleTabCount={visibleTabCount}
+                    onClose={closeOverflowDropdown}
+                    pageLayoutType={pageLayoutType}
+                  />
+                </StyledDropdownContainer>
               )}
 
               {onAddTab && (
@@ -405,16 +412,18 @@ export const PageLayoutTabList = ({
               canReorder={canReorderTabs}
             />
             {shouldRenderStaticDropdown && (
-              <PageLayoutTabListStaticOverflowDropdown
-                dropdownId={dropdownId}
-                hiddenTabs={hiddenTabs}
-                hiddenTabsCount={hiddenTabsCount}
-                isActiveTabHidden={isActiveTabHidden}
-                activeTabId={activeTabId || ''}
-                loading={loading}
-                onSelect={handleSelectTabFromDropdown}
-                onClose={closeOverflowDropdown}
-              />
+              <StyledDropdownContainer>
+                <PageLayoutTabListStaticOverflowDropdown
+                  dropdownId={dropdownId}
+                  hiddenTabs={hiddenTabs}
+                  hiddenTabsCount={hiddenTabsCount}
+                  isActiveTabHidden={isActiveTabHidden}
+                  activeTabId={activeTabId || ''}
+                  loading={loading}
+                  onSelect={handleSelectTabFromDropdown}
+                  onClose={closeOverflowDropdown}
+                />
+              </StyledDropdownContainer>
             )}
             {onAddTab && (
               <StyledAddButton>

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

@@ -34,6 +34,11 @@ const StyledContainer = styled.div`
   }
 `;
 
+const StyledDropdownContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
 const StyledTabContainer = styled.div`
   display: flex;
   gap: ${TAB_LIST_GAP}px;
@@ -156,20 +161,22 @@ export const TabList = ({
             </StyledTabContainer>
 
             {hasHiddenTabs && (
-              <TabListDropdown
-                dropdownId={dropdownId}
-                onClose={() => {
-                  closeDropdown(dropdownId);
-                }}
-                overflow={{
-                  hiddenTabsCount,
-                  isActiveTabHidden,
-                }}
-                hiddenTabs={hiddenTabs}
-                activeTabId={activeTabId || ''}
-                onTabSelect={handleTabSelectFromDropdown}
-                loading={loading}
-              />
+              <StyledDropdownContainer>
+                <TabListDropdown
+                  dropdownId={dropdownId}
+                  onClose={() => {
+                    closeDropdown(dropdownId);
+                  }}
+                  overflow={{
+                    hiddenTabsCount,
+                    isActiveTabHidden,
+                  }}
+                  hiddenTabs={hiddenTabs}
+                  activeTabId={activeTabId || ''}
+                  onTabSelect={handleTabSelectFromDropdown}
+                  loading={loading}
+                />
+              </StyledDropdownContainer>
             )}
           </StyledContainer>
         </NodeDimension>

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

@@ -1,14 +1,6 @@
-import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconChevronDown } from 'twenty-ui/display';
 import { TabButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-const StyledTabMoreButtonContainer = styled.div`
-  > * {
-    height: ${themeCssVariables.spacing[10]};
-  }
-`;
 
 export const TabMoreButton = ({
   hiddenTabsCount,
@@ -20,14 +12,12 @@ export const TabMoreButton = ({
   className?: string;
 }) => {
   return (
-    <StyledTabMoreButtonContainer>
-      <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}
+    />
   );
 };