Fix dropdown (#12126)

In this PR:
- deprecating listenClickOutside ComparePixel mode as this is not
accurate. We were using to avoid portal issue with CompareHtmlRef mode
but this is still an issue when portalled content overflows the
container.
- add ClickOutsideContext to specify excluded className so portal
children can use it easily (part of the tooling)
- fix stories
- remove avoidPortal from dropdown as this was not used

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -35,10 +34,6 @@ type RecordDetailRelationSectionDropdownProps = {
   loading: boolean;
 };
 
-const StyledAddDropdown = styled(Dropdown)`
-  margin-left: auto;
-`;
-
 export const RecordDetailRelationSectionDropdown = ({
   loading,
 }: RecordDetailRelationSectionDropdownProps) => {
@@ -196,7 +191,7 @@ export const RecordDetailRelationSectionDropdown = ({
 
   return (
     <DropdownScope dropdownScopeId={dropdownId}>
-      <StyledAddDropdown
+      <Dropdown
         dropdownId={dropdownId}
         dropdownPlacement="left-start"
         onClose={handleCloseRelationPickerDropdown}

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx

@@ -8,6 +8,7 @@ import { onToggleColumnSortComponentState } from '@/object-record/record-table/s
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import {
   IconArrowLeft,
@@ -24,6 +25,10 @@ export type RecordTableColumnHeadDropdownMenuProps = {
   column: ColumnDefinition<FieldMetadata>;
 };
 
+const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+  z-index: ${({ theme }) => theme.lastLayerZIndex};
+`;
+
 export const RecordTableColumnHeadDropdownMenu = ({
   column,
 }: RecordTableColumnHeadDropdownMenuProps) => {
@@ -102,7 +107,7 @@ export const RecordTableColumnHeadDropdownMenu = ({
   const canHide = column.isLabelIdentifier !== true;
 
   return (
-    <DropdownMenuItemsContainer>
+    <StyledDropdownMenuItemsContainer>
       {isFilterable && (
         <MenuItem
           LeftIcon={IconFilter}
@@ -139,6 +144,6 @@ export const RecordTableColumnHeadDropdownMenu = ({
           text={t`Hide`}
         />
       )}
-    </DropdownMenuItemsContainer>
+    </StyledDropdownMenuItemsContainer>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx

@@ -2,7 +2,6 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
-import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
 import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
@@ -11,12 +10,6 @@ type RecordTableColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
 };
 
-const StyledDropdown = styled(Dropdown)`
-  display: flex;
-  flex: 1;
-  z-index: ${({ theme }) => theme.lastLayerZIndex};
-`;
-
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
@@ -34,7 +27,7 @@ export const RecordTableColumnHeadWithDropdown = ({
   }, [toggleScrollXWrapper, toggleScrollYWrapper]);
 
   return (
-    <StyledDropdown
+    <Dropdown
       onOpen={handleDropdownOpen}
       onClose={handleDropdownClose}
       dropdownId={column.fieldMetadataId + '-header'}