From a83279ddcecb8fac5c5c705a6052baa798091c51 Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Tue, 27 May 2025 11:17:03 +0200
Subject: [PATCH] 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)
---
 .../components/ObjectSortDropdownButton.tsx   | 13 +++-
 .../DropdownMenuHeader/DropdownMenuHeader.tsx |  2 -
 ...ultiWorkspaceDropdownDefaultComponents.tsx |  1 +
 ...MultiWorkspaceDropdownThemesComponents.tsx | 27 ++++----
 ...kspaceDropdownWorkspacesListComponents.tsx | 65 ++++++++++---------
 5 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 59b1c4bf0..0afe3acc1 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/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}
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
index dc39b99ee..61292af64 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
+++ b/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;
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
index bebc4de78..b03888beb 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
index 3dfe4896f..426b50884 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
+++ b/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,15 +30,19 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
       >
         {t`Theme`}
       </DropdownMenuHeader>
-      {colorSchemeList.map((theme) => (
-        <MenuItem
-          LeftIcon={theme.icon}
-          /* eslint-disable-next-line lingui/no-expression-in-message */
-          text={t`${theme.id}`}
-          onClick={() => setColorScheme(theme.id)}
-          RightIcon={theme.id === colorScheme ? IconCheck : undefined}
-        />
-      ))}
-    </DropdownMenuItemsContainer>
+      <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}`}
+            onClick={() => setColorScheme(theme.id)}
+            RightIcon={theme.id === colorScheme ? IconCheck : undefined}
+          />
+        ))}
+      </DropdownMenuItemsContainer>
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
index f660a7d89..cb8a4e8bc 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
+++ b/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,35 +52,37 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
         }}
       />
       <DropdownMenuSeparator />
-      {workspaces
-        .filter(
-          (workspace) =>
-            workspace.id !== currentWorkspace?.id &&
-            workspace.displayName
-              ?.toLowerCase()
-              .includes(searchValue.toLowerCase()),
-        )
-        .map((workspace) => (
-          <UndecoratedLink
-            key={workspace.id}
-            to={buildWorkspaceUrl(getWorkspaceUrl(workspace.workspaceUrls))}
-            onClick={(event) => {
-              event?.preventDefault();
-              handleChange(workspace);
-            }}
-          >
-            <MenuItemSelectAvatar
-              text={workspace.displayName ?? '(No name)'}
-              avatar={
-                <Avatar
-                  placeholder={workspace.displayName || ''}
-                  avatarUrl={workspace.logo ?? DEFAULT_WORKSPACE_LOGO}
-                />
-              }
-              selected={currentWorkspace?.id === workspace.id}
-            />
-          </UndecoratedLink>
-        ))}
-    </DropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer>
+        {workspaces
+          .filter(
+            (workspace) =>
+              workspace.id !== currentWorkspace?.id &&
+              workspace.displayName
+                ?.toLowerCase()
+                .includes(searchValue.toLowerCase()),
+          )
+          .map((workspace) => (
+            <UndecoratedLink
+              key={workspace.id}
+              to={buildWorkspaceUrl(getWorkspaceUrl(workspace.workspaceUrls))}
+              onClick={(event) => {
+                event?.preventDefault();
+                handleChange(workspace);
+              }}
+            >
+              <MenuItemSelectAvatar
+                text={workspace.displayName ?? '(No name)'}
+                avatar={
+                  <Avatar
+                    placeholder={workspace.displayName || ''}
+                    avatarUrl={workspace.logo ?? DEFAULT_WORKSPACE_LOGO}
+                  />
+                }
+                selected={currentWorkspace?.id === workspace.id}
+              />
+            </UndecoratedLink>
+          ))}
+      </DropdownMenuItemsContainer>
+    </>
   );
 };