Fix dropdown menu header (#4835)

Fix an issue I add introduced by removing "position:static" and an other
regression from https://github.com/twentyhq/twenty/issues/4366

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

@@ -1,4 +1,5 @@
 import { ComponentProps, MouseEvent } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@@ -7,27 +8,40 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 const StyledHeader = styled.li`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
 
   padding: ${({ theme }) => theme.spacing(1)};
 
   user-select: none;
+
+  &:hover {
+    background: ${({ theme, onClick }) =>
+      onClick ? theme.background.transparent.light : 'none'};
+  }
+`;
+
+const StyledEndIcon = styled.div`
+  display: inline-flex;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: ${({ theme }) => theme.spacing(1)};
+  margin-left: auto;
+  margin-right: 0;
+
+  & > svg {
+    height: ${({ theme }) => theme.icon.size.md}px;
+    width: ${({ theme }) => theme.icon.size.md}px;
+  }
 `;
 
 const StyledChildrenWrapper = styled.span`
   padding: 0 ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledLightIconButton = styled(LightIconButton)`
-  display: inline-flex;
-  margin-left: auto;
-  margin-right: 0;
-`;
-
 type DropdownMenuHeaderProps = ComponentProps<'li'> & {
   StartIcon?: IconComponent;
   EndIcon?: IconComponent;
@@ -42,27 +56,29 @@ export const DropdownMenuHeader = ({
   onClick,
   testId,
 }: DropdownMenuHeaderProps) => {
+  const theme = useTheme();
   return (
-    <StyledHeader data-testid={testId}>
+    <>
-      {StartIcon && (
-        <LightIconButton
-          onClick={onClick}
-          testId="dropdown-menu-header-end-icon"
-          Icon={StartIcon}
-          accent="tertiary"
-          size="small"
-        />
-      )}
-      <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
       {EndIcon && (
-        <StyledLightIconButton
+        <StyledHeader data-testid={testId} onClick={onClick}>
-          onClick={onClick}
+          <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
-          testId="dropdown-menu-header-end-icon"
+          <StyledEndIcon>
-          Icon={EndIcon}
+            <EndIcon size={theme.icon.size.md} />
-          accent="tertiary"
+          </StyledEndIcon>
-          size="small"
+        </StyledHeader>
-        />
       )}
-    </StyledHeader>
+      {StartIcon && (
+        <StyledHeader data-testid={testId}>
+          <LightIconButton
+            testId="dropdown-menu-header-end-icon"
+            Icon={StartIcon}
+            accent="tertiary"
+            size="small"
+            onClick={onClick}
+          />
+          <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
+        </StyledHeader>
+      )}
+    </>
   );
 };

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -117,6 +117,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
     & .hoverable-buttons {
       opacity: 1;
       pointer-events: auto;
+      position: static;
     }
   }
 `;