fix(dropdown): separator width + DropdownHeader height (#12285)

## Before

![CleanShot 2025-05-26 at 15 26
35@2x](https://github.com/user-attachments/assets/d6247af2-6008-4234-b777-13597c697b12)

## After

![CleanShot 2025-05-26 at 15 26
42@2x](https://github.com/user-attachments/assets/65447c84-4313-4f9a-831d-efc1eccd3d26)

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -73,6 +73,12 @@ const StyledSelectedSortDirectionContainer = styled.div`
   z-index: 1000;
 `;
 
+const StyledDropdownMenuHeaderEndComponent = styled.div`
+  padding: ${({ theme }) => theme.spacing(1)};
+  display: flex;
+  align-items: center;
+`;
+
 export type ObjectSortDropdownButtonProps = {
   hotkeyScope: HotkeyScope;
 };
@@ -253,12 +259,17 @@ export const ObjectSortDropdownButton = ({
                 !isRecordSortDirectionMenuUnfolded,
               )
             }
-            EndComponent={<IconChevronDown size={theme.icon.size.md} />}
+            EndComponent={
+              <StyledDropdownMenuHeaderEndComponent>
+                <IconChevronDown size={theme.icon.size.md} />
+              </StyledDropdownMenuHeaderEndComponent>
+            }
           >
             {selectedRecordSortDirection === 'asc'
               ? t`Ascending`
               : t`Descending`}
           </DropdownMenuHeader>
+          <DropdownMenuSeparator />
           <StyledInput
             autoFocus
             value={objectSortDropdownSearchInput}

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

@@ -12,7 +12,6 @@ const StyledHeader = styled.li`
   border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
   border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
   padding: ${({ theme }) => theme.spacing(1)};
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
 
   user-select: none;
 
@@ -32,7 +31,6 @@ const StyledChildrenWrapper = styled.span`
 const StyledEndComponent = styled.div`
   display: inline-flex;
   color: ${({ theme }) => theme.font.color.tertiary};
-  padding: ${({ theme }) => theme.spacing(1)};
   margin-left: auto;
   margin-right: 0;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx

@@ -129,6 +129,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
       >
         {currentWorkspace?.displayName}
       </DropdownMenuHeader>
+      <DropdownMenuSeparator />
       {workspaces.length > 1 && (
         <>
           <StyledDropdownMenuItemsContainer>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx

@@ -7,6 +7,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useSetRecoilState } from 'recoil';
 import { IconCheck, IconChevronLeft } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 
 export const MultiWorkspaceDropdownThemesComponents = () => {
   const { t } = useLingui();
@@ -18,7 +19,7 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
   );
 
   return (
-    <DropdownMenuItemsContainer>
+    <>
       <DropdownMenuHeader
         StartComponent={
           <DropdownMenuHeaderLeftComponent
@@ -29,8 +30,11 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
       >
         {t`Theme`}
       </DropdownMenuHeader>
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
         {colorSchemeList.map((theme) => (
           <MenuItem
+            key={theme.id}
             LeftIcon={theme.icon}
             /* eslint-disable-next-line lingui/no-expression-in-message */
             text={t`${theme.id}`}
@@ -39,5 +43,6 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
           />
         ))}
       </DropdownMenuItemsContainer>
+    </>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx

@@ -32,7 +32,7 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
   const [searchValue, setSearchValue] = useState('');
 
   return (
-    <DropdownMenuItemsContainer>
+    <>
       <DropdownMenuHeader
         StartComponent={
           <DropdownMenuHeaderLeftComponent
@@ -43,6 +43,7 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
       >
         {t`Other workspaces`}
       </DropdownMenuHeader>
+      <DropdownMenuSeparator />
       <DropdownMenuSearchInput
         placeholder={t`Search`}
         autoFocus
@@ -51,6 +52,7 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
         }}
       />
       <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
         {workspaces
           .filter(
             (workspace) =>
@@ -81,5 +83,6 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
             </UndecoratedLink>
           ))}
       </DropdownMenuItemsContainer>
+    </>
   );
 };