fix: fix dropdown buttons z-index (#1431)

Closes #1430, Closes #1422

front/src/modules/ui/board/components/BoardHeader.tsx

@@ -1,4 +1,10 @@
-import { Context, ReactNode, useCallback, useState } from 'react';
+import {
+  type ComponentProps,
+  Context,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@@ -15,7 +21,7 @@ import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
 
 import { BoardOptionsDropdown } from './BoardOptionsDropdown';
 
-type OwnProps<SortField> = {
+type OwnProps<SortField> = ComponentProps<'div'> & {
   viewName: string;
   viewIcon?: ReactNode;
   availableSorts?: Array<SortType<SortField>>;
@@ -41,6 +47,7 @@ export function BoardHeader<SortField>({
   onSortsUpdate,
   onStageAdd,
   context,
+  ...props
 }: OwnProps<SortField>) {
   const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
     [],
@@ -67,6 +74,7 @@ export function BoardHeader<SortField>({
   return (
     <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
       <TopBar
+        {...props}
         displayBottomBorder={false}
         leftComponent={
           <>

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -41,6 +41,11 @@ const StyledWrapper = styled.div`
   width: 100%;
 `;
 
+const StyledBoardHeader = styled(BoardHeader)`
+  position: relative;
+  z-index: 1;
+` as typeof BoardHeader;
+
 export function EntityBoard({
   boardOptions,
   onColumnAdd,
@@ -130,7 +135,7 @@ export function EntityBoard({
 
   return (boardColumns?.length ?? 0) > 0 ? (
     <StyledWrapper>
-      <BoardHeader
+      <StyledBoardHeader
         viewName="All opportunities"
         viewIcon={<IconList size={theme.icon.size.md} />}
         availableSorts={boardOptions.sorts}

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
-import styled from '@emotion/styled';
 import { flip, offset, Placement, useFloating } from '@floating-ui/react';
 
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -13,11 +12,6 @@ import { useDropdownButton } from '../hooks/useDropdownButton';
 import { dropdownButtonCustomHotkeyScopeScopedFamilyState } from '../states/dropdownButtonCustomHotkeyScopeScopedFamilyState';
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
-const StyledContainer = styled.div`
-  position: relative;
-  z-index: 100;
-`;
-
 type OwnProps = {
   buttonComponents: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
@@ -81,7 +75,7 @@ export function DropdownButton({
   ]);
 
   return (
-    <StyledContainer ref={containerRef}>
+    <div ref={containerRef}>
       {hotkey && (
         <HotkeyEffect
           hotkey={hotkey}
@@ -94,6 +88,6 @@ export function DropdownButton({
           {dropdownComponents}
         </div>
       )}
-    </StyledContainer>
+    </div>
   );
 }

front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx

@@ -22,8 +22,6 @@ type OwnProps = {
 const StyledDropdownButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
-  position: relative;
-  z-index: 1;
 `;
 
 const StyledDropdownButtonIcon = styled.div`

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback } from 'react';
+import { type ComponentProps, type ReactNode, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
@@ -63,14 +63,20 @@ const StyledPageActionContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
+type OwnProps = ComponentProps<'div'> & {
   title: string;
   hasBackButton?: boolean;
   icon: ReactNode;
   children?: JSX.Element | JSX.Element[];
 };
 
-export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {
+export function PageHeader({
+  title,
+  hasBackButton,
+  icon,
+  children,
+  ...props
+}: OwnProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
 
@@ -81,7 +87,7 @@ export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {
     : navbarIconSize.desktop;
 
   return (
-    <StyledTopBarContainer>
+    <StyledTopBarContainer {...props}>
       <StyledLeftContainer>
         {!isNavbarOpened && (
           <StyledTopBarButtonContainer>

front/src/modules/ui/top-bar/TopBar.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type OwnProps = ComponentProps<'div'> & {
   leftComponent?: ReactNode;
   rightComponent?: ReactNode;
   bottomComponent?: ReactNode;
@@ -43,9 +43,10 @@ export function TopBar({
   rightComponent,
   bottomComponent,
   displayBottomBorder = true,
+  ...props
 }: OwnProps) {
   return (
-    <StyledContainer>
+    <StyledContainer {...props}>
       <StyledTopBar displayBottomBorder={displayBottomBorder}>
         <StyledLeftSection>{leftComponent}</StyledLeftSection>
         <StyledRightSection>{rightComponent}</StyledRightSection>

front/src/pages/opportunities/Opportunities.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
@@ -24,6 +25,11 @@ import {
 } from '~/generated/graphql';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
+const StyledPageHeader = styled(PageHeader)`
+  position: relative;
+  z-index: 2;
+`;
+
 export function Opportunities() {
   const theme = useTheme();
 
@@ -74,14 +80,14 @@ export function Opportunities() {
   return (
     <PageContainer>
       <RecoilScope>
-        <PageHeader
+        <StyledPageHeader
           title="Opportunities"
           icon={<IconTargetArrow size={theme.icon.size.md} />}
         >
           <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
             <PipelineAddButton />
           </RecoilScope>
-        </PageHeader>
+        </StyledPageHeader>
         <PageBody>
           <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
             <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>