Design fixes (#696)

* Design fixes

* Fix design

* unused code

* Fix tests

front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts

@@ -29,6 +29,7 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() {
     viewableCommentThreadIdState,
   );
   const setHotkeyScope = useSetHotkeyScope();
+  setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
 
   const [, setCommentableEntityArray] = useRecoilState(
     commentableEntityArrayState,

front/src/modules/companies/components/CompanyAccountOwnerCell.tsx

@@ -27,6 +27,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
 
   return (
     <EditableCell
+      transparent
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
         <CompanyAccountOwnerPicker

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
-import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
 import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
 import {
-  CommentableType,
   GetCompaniesQuery,
   useUpdateCompanyMutation,
 } from '~/generated/graphql';
@@ -20,23 +17,10 @@ type OwnProps = {
 };
 
 export function CompanyEditableNameChipCell({ company }: OwnProps) {
-  const openCommentRightDrawer = useOpenTimelineRightDrawer();
   const [updateCompany] = useUpdateCompanyMutation();
 
   const [internalValue, setInternalValue] = useState(company.name ?? '');
 
-  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    openCommentRightDrawer([
-      {
-        type: CommentableType.Company,
-        id: company.id,
-      },
-    ]);
-  }
-
   useEffect(() => {
     setInternalValue(company.name ?? '');
   }, [company.name]);
@@ -49,12 +33,6 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
       id={company.id}
       changeHandler={setInternalValue}
       ChipComponent={CompanyChip}
-      rightEndContents={[
-        <CellCommentChip
-          count={company._commentThreadCount ?? 0}
-          onClick={handleCommentClick}
-        />,
-      ]}
       onSubmit={() =>
         updateCompany({
           variables: {

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,9 +1,7 @@
 import styled from '@emotion/styled';
 
-import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
-import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
 import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
-import { CommentableType, Person } from '~/generated/graphql';
+import { Person } from '~/generated/graphql';
 
 import { PersonChip } from './PersonChip';
 
@@ -26,18 +24,12 @@ const NoEditModeContainer = styled.div`
   width: 100%;
 `;
 
-const RightContainer = styled.div`
-  margin-left: ${(props) => props.theme.spacing(1)};
-`;
-
 export function EditablePeopleFullName({
   person,
   onChange,
   onSubmit,
   onCancel,
 }: OwnProps) {
-  const openCommentRightDrawer = useOpenTimelineRightDrawer();
-
   function handleDoubleTextChange(
     firstValue: string,
     secondValue: string,
@@ -45,22 +37,6 @@ export function EditablePeopleFullName({
     onChange(firstValue, secondValue);
   }
 
-  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!person) {
-      return;
-    }
-
-    openCommentRightDrawer([
-      {
-        type: CommentableType.Person,
-        id: person.id ?? '',
-      },
-    ]);
-  }
-
   return (
     <EditableCellDoubleText
       firstValue={person?.firstName ?? ''}
@@ -76,12 +52,6 @@ export function EditablePeopleFullName({
             name={person?.firstName + ' ' + person?.lastName}
             id={person?.id ?? ''}
           />
-          <RightContainer>
-            <CellCommentChip
-              count={person?._commentThreadCount ?? 0}
-              onClick={handleCommentClick}
-            />
-          </RightContainer>
         </NoEditModeContainer>
       }
     />

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -24,6 +24,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
 
   return (
     <EditableCell
+      transparent
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
         isCreating ? (

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
-import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
+import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdatePeopleMutation } from '~/generated/graphql';
 
@@ -20,7 +20,7 @@ export function EditablePeopleCityCell() {
   }, [city]);
 
   return (
-    <EditableCellPhone
+    <EditableCellText
       value={internalValue}
       onChange={setInternalValue}
       onSubmit={() =>

front/src/modules/ui/action-bar/components/ActionBar.tsx

@@ -18,7 +18,7 @@ type StyledContainerProps = {
 const StyledContainer = styled.div<StyledContainerProps>`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
   bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};

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

@@ -1,19 +1,19 @@
 import styled from '@emotion/styled';
 
 export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
-  align-items: center;
   backdrop-filter: ${({ disableBlur }) =>
     disableBlur ? 'none' : 'blur(20px)'};
 
   background: ${({ theme }) => theme.background.transparent.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
-
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
 
   display: flex;
 
   flex-direction: column;
 
-  width: 200px;
+  min-width: 160px;
+
+  overflow: hidden;
 `;

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

@@ -1,30 +0,0 @@
-import styled from '@emotion/styled';
-
-import { hoverBackground } from '@/ui/themes/effects';
-
-export const DropdownMenuButton = styled.div`
-  --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
-  --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
-  align-items: center;
-
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  color: ${({ theme }) => theme.font.color.secondary};
-
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-
-  font-size: ${({ theme }) => theme.font.size.sm};
-
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: calc(32px - 2 * var(--vertical-padding));
-
-  padding: var(--vertical-padding) var(--horizontal-padding);
-
-  ${hoverBackground};
-
-  user-select: none;
-  width: calc(100% - 2 * var(--horizontal-padding));
-`;

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { Checkbox } from '@/ui/input/components/Checkbox';
 
-import { DropdownMenuButton } from './DropdownMenuButton';
+import { DropdownMenuItem } from './DropdownMenuItem';
 
 type Props = {
   checked: boolean;
@@ -11,7 +11,7 @@ type Props = {
   id?: string;
 };
 
-const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
+const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
   align-items: center;
   display: flex;
   justify-content: space-between;

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

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenuItem = styled.div`
+import { hoverBackground } from '@/ui/themes/effects';
-  --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
+
+export const DropdownMenuItem = styled.li`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
   align-items: center;
@@ -9,8 +11,10 @@ export const DropdownMenuItem = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.secondary};
 
+  cursor: pointer;
   display: flex;
   flex-direction: row;
+
   font-size: ${({ theme }) => theme.font.size.sm};
 
   gap: ${({ theme }) => theme.spacing(2)};
@@ -18,5 +22,9 @@ export const DropdownMenuItem = styled.div`
   height: calc(32px - 2 * var(--vertical-padding));
 
   padding: var(--vertical-padding) var(--horizontal-padding);
+
+  ${hoverBackground};
+
+  user-select: none;
   width: calc(100% - 2 * var(--horizontal-padding));
 `;

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

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenuItemContainer = styled.div`
+export const DropdownMenuItemsContainer = styled.div<{
-  --padding: ${({ theme }) => theme.spacing(1 / 2)};
+  hasMaxHeight?: boolean;
+}>`
+  --padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: flex-start;
   display: flex;
@@ -9,7 +11,7 @@ export const DropdownMenuItemContainer = styled.div`
   flex-direction: column;
   gap: 2px;
   height: 100%;
-  max-height: 180px;
+  max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
   overflow-y: auto;
 
   padding: var(--padding);

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

@@ -7,7 +7,6 @@ export const DropdownMenuSearchContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
 
   display: flex;
   flex-direction: row;

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

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { IconCheck } from '@/ui/icon/index';
 import { hoverBackground } from '@/ui/themes/effects';
 
-import { DropdownMenuButton } from './DropdownMenuButton';
+import { DropdownMenuItem } from './DropdownMenuItem';
 
 type Props = {
   selected?: boolean;
@@ -13,7 +13,7 @@ type Props = {
   hovered?: boolean;
 };
 
-const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
+const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
   ${hoverBackground};
 
   align-items: center;

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -7,10 +7,9 @@ import { Avatar } from '@/users/components/Avatar';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { DropdownMenu } from '../DropdownMenu';
-import { DropdownMenuButton } from '../DropdownMenuButton';
 import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
 import { DropdownMenuItem } from '../DropdownMenuItem';
-import { DropdownMenuItemContainer } from '../DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '../DropdownMenuSearch';
 import { DropdownMenuSelectableItem } from '../DropdownMenuSelectableItem';
 import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
@@ -128,9 +127,9 @@ export const EmptyWithContentBelow: Story = {
 export const SimpleMenuItem: Story = {
   render: getRenderWrapperForComponent(
     <DropdownMenuStoryWrapper>
-      <DropdownMenuItemContainer>
+      <DropdownMenuItemsContainer hasMaxHeight>
         <FakeMenuItemList />
-      </DropdownMenuItemContainer>
+      </DropdownMenuItemsContainer>
     </DropdownMenuStoryWrapper>,
   ),
 };
@@ -143,9 +142,9 @@ export const Search: Story = {
         <DropdownMenu>
           <DropdownMenuSearch />
           <DropdownMenuSeparator />
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeMenuItemList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,
@@ -176,16 +175,16 @@ export const Button: Story = {
       <FakeContentBelow />
       <MenuAbsolutePositionWrapper>
         <DropdownMenu>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
-            <DropdownMenuButton>
+            <DropdownMenuItem>
               <IconPlus size={16} />
               <div>Create new</div>
-            </DropdownMenuButton>
+            </DropdownMenuItem>
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
           <DropdownMenuSeparator />
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeSelectableMenuItemList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,
@@ -198,9 +197,9 @@ export const SelectableMenuItem: Story = {
       <FakeContentBelow />
       <MenuAbsolutePositionWrapper>
         <DropdownMenu>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeSelectableMenuItemList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,
@@ -237,9 +236,9 @@ export const SelectableMenuItemWithAvatar: Story = {
       <FakeContentBelow />
       <MenuAbsolutePositionWrapper>
         <DropdownMenu>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeSelectableMenuItemWithAvatarList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,
@@ -277,9 +276,9 @@ export const CheckableMenuItem: Story = {
       <FakeContentBelow />
       <MenuAbsolutePositionWrapper>
         <DropdownMenu>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeCheckableMenuItemList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,
@@ -323,9 +322,9 @@ export const CheckableMenuItemWithAvatar: Story = {
       <FakeContentBelow />
       <MenuAbsolutePositionWrapper>
         <DropdownMenu>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <FakeCheckableMenuItemWithAvatarList />
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenu>
       </MenuAbsolutePositionWrapper>
     </FakeBelowContainer>,

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

@@ -2,10 +2,10 @@ import { ReactNode, useRef } from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { useOutsideAlerter } from '@/ui/hooks/useOutsideAlerter';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { IconChevronDown } from '@/ui/icon/index';
-import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
 
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 
@@ -50,69 +50,22 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   }
 `;
 
-const StyledDropdown = styled.ul`
+const StyledDropdownMenuContainer = styled.ul`
-  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
-  --wraper-border: 1px;
-  --wraper-border-radius: ${({ theme }) => theme.border.radius.md};
-
-  border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
-  border-radius: var(--wraper-border-radius);
-  display: flex;
-  flex-direction: column;
-  min-width: 160px;
-  padding: 0px;
   position: absolute;
   right: 0;
   top: 14px;
-  ${overlayBackground}
-  li {
-    &:first-of-type {
-      border-top-left-radius: var(--outer-border-radius);
-      border-top-right-radius: var(--outer-border-radius);
-    }
-    &:last-of-type {
-      border-bottom: 0;
-      border-bottom-left-radius: var(--outer-border-radius);
-      border-bottom-right-radius: var(--outer-border-radius);
-    }
-  }
-`;
-
-const StyledDropdownItem = styled.li`
-  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
-  color: ${({ theme }) => theme.font.color.secondary};
-  cursor: pointer;
-  display: flex;
-  margin: 2px;
-  padding: ${({ theme }) => theme.spacing(2)}
-    calc(${({ theme }) => theme.spacing(2)} - 2px);
-  user-select: none;
-  width: calc(160px - ${({ theme }) => theme.spacing(4)});
-
-  &:hover {
-    background: ${({ theme }) => theme.background.transparent.light};
-  }
-`;
-
-const StyledDropdownItemClipped = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 `;
 
 const StyledDropdownTopOption = styled.li`
-  align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   justify-content: space-between;
+
   padding: calc(${({ theme }) => theme.spacing(2)})
     calc(${({ theme }) => theme.spacing(2)});
-
   &:hover {
     background: ${({ theme }) => theme.background.transparent.light};
   }
@@ -126,35 +79,6 @@ const StyledIcon = styled.div`
   min-width: ${({ theme }) => theme.spacing(4)};
 `;
 
-const StyledSearchField = styled.li`
-  align-items: center;
-  border-bottom: var(--wraper-border) solid
-    ${({ theme }) => theme.border.color.light};
-  color: ${({ theme }) => theme.font.color.secondary};
-
-  cursor: pointer;
-  display: flex;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  justify-content: space-between;
-  overflow: hidden;
-
-  user-select: none;
-  input {
-    border-radius: ${({ theme }) => theme.border.radius.md};
-    box-sizing: border-box;
-    font-family: ${({ theme }) => theme.font.family};
-    height: 36px;
-    padding: 8px;
-    width: 100%;
-
-    ${textInputStyle}
-
-    &:focus {
-      outline: 0 none;
-    }
-  }
-`;
-
 function DropdownButton({
   label,
   isActive,
@@ -194,7 +118,9 @@ function DropdownButton({
         {label}
       </StyledDropdownButton>
       {isUnfolded && (
-        <StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
+        <StyledDropdownMenuContainer>
+          <DropdownMenu ref={dropdownRef}>{children}</DropdownMenu>
+        </StyledDropdownMenuContainer>
       )}
     </StyledDropdownButtonContainer>
   );
@@ -215,9 +141,6 @@ function DropdownTopOptionAngleDown() {
     </StyleAngleDownContainer>
   );
 }
-DropdownButton.StyledDropdownItem = StyledDropdownItem;
-DropdownButton.StyledDropdownItemClipped = StyledDropdownItemClipped;
-DropdownButton.StyledSearchField = StyledSearchField;
 DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
 DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;
 DropdownButton.StyledIcon = StyledIcon;

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

@@ -1,6 +1,7 @@
 import { Context, useCallback, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
@@ -107,20 +108,19 @@ export function FilterDropdownButton({
         selectedOperandInDropdown && (
           <>
             <FilterDropdownOperandButton context={context} />
-            <DropdownButton.StyledSearchField autoFocus key={'search-filter'}>
+            <DropdownMenuSeparator />
-              {filterDefinitionUsedInDropdown.type === 'text' && (
+            {filterDefinitionUsedInDropdown.type === 'text' && (
-                <FilterDropdownTextSearchInput context={context} />
+              <FilterDropdownTextSearchInput context={context} />
-              )}
+            )}
-              {filterDefinitionUsedInDropdown.type === 'number' && (
+            {filterDefinitionUsedInDropdown.type === 'number' && (
-                <FilterDropdownNumberSearchInput context={context} />
+              <FilterDropdownNumberSearchInput context={context} />
-              )}
+            )}
-              {filterDefinitionUsedInDropdown.type === 'date' && (
+            {filterDefinitionUsedInDropdown.type === 'date' && (
-                <FilterDropdownDateSearchInput context={context} />
+              <FilterDropdownDateSearchInput context={context} />
-              )}
+            )}
-              {filterDefinitionUsedInDropdown.type === 'entity' && (
+            {filterDefinitionUsedInDropdown.type === 'entity' && (
-                <FilterDropdownEntitySearchInput context={context} />
+              <FilterDropdownEntitySearchInput context={context} />
-              )}
+            )}
-            </DropdownButton.StyledSearchField>
             {filterDefinitionUsedInDropdown.type === 'entity' && (
               <FilterDropdownEntitySelect context={context} />
             )}

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

@@ -1,5 +1,6 @@
 import { ChangeEvent, Context } from 'react';
 
+import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
@@ -26,7 +27,7 @@ export function FilterDropdownEntitySearchInput({
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
-      <input
+      <DropdownMenuSearch
         type="text"
         value={filterDropdownSearchInput}
         placeholder={filterDefinitionUsedInDropdown.label}

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

@@ -1,6 +1,6 @@
 import { Context } from 'react';
 
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
@@ -43,7 +43,7 @@ export function FilterDropdownFilterSelect({
   const setHotkeyScope = useSetHotkeyScope();
 
   return (
-    <DropdownMenuItemContainer style={{ maxHeight: '300px' }}>
+    <DropdownMenuItemsContainer>
       {availableFilters.map((availableFilter, index) => (
         <DropdownMenuSelectableItem
           key={`select-filter-${index}`}
@@ -67,6 +67,6 @@ export function FilterDropdownFilterSelect({
           {availableFilter.label}
         </DropdownMenuSelectableItem>
       ))}
-    </DropdownMenuItemContainer>
+    </DropdownMenuItemsContainer>
   );
 }

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

@@ -1,5 +1,6 @@
 import { ChangeEvent, Context } from 'react';
 
+import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
 
 import { useRemoveFilter } from '../hooks/useRemoveFilter';
@@ -28,7 +29,7 @@ export function FilterDropdownNumberSearchInput({
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
-      <input
+      <DropdownMenuSearch
         type="number"
         placeholder={filterDefinitionUsedInDropdown.label}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {

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

@@ -1,6 +1,7 @@
 import { Context } from 'react';
 
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
 
 import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
@@ -12,8 +13,6 @@ import { FilterOperand } from '../types/FilterOperand';
 import { getOperandLabel } from '../utils/getOperandLabel';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
-import DropdownButton from './DropdownButton';
-
 export function FilterDropdownOperandSelect({
   context,
 }: {
@@ -63,17 +62,17 @@ export function FilterDropdownOperandSelect({
   }
 
   return (
-    <DropdownMenuItemContainer>
+    <DropdownMenuItemsContainer>
       {operandsForFilterType.map((filterOperand, index) => (
-        <DropdownButton.StyledDropdownItem
+        <DropdownMenuItem
           key={`select-filter-operand-${index}`}
           onClick={() => {
             handleOperangeChange(filterOperand);
           }}
         >
           {getOperandLabel(filterOperand)}
-        </DropdownButton.StyledDropdownItem>
+        </DropdownMenuItem>
       ))}
-    </DropdownMenuItemContainer>
+    </DropdownMenuItemsContainer>
   );
 }

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

@@ -1,5 +1,6 @@
 import { ChangeEvent, Context } from 'react';
 
+import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
 
 import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
@@ -35,7 +36,7 @@ export function FilterDropdownTextSearchInput({
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
-      <input
+      <DropdownMenuSearch
         type="text"
         placeholder={filterDefinitionUsedInDropdown.label}
         value={filterCurrentlyEdited?.value ?? filterDropdownSearchInput}

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

@@ -1,5 +1,9 @@
 import { useCallback, useState } from 'react';
 
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '../types/interface';
 
@@ -56,9 +60,10 @@ export function SortDropdownButton<SortField>({
       onIsUnfoldedChange={handleIsUnfoldedChange}
       HotkeyScope={HotkeyScope}
     >
-      {isOptionUnfolded
+      {isOptionUnfolded ? (
-        ? options.map((option, index) => (
+        <DropdownMenuItemsContainer>
-            <DropdownButton.StyledDropdownItem
+          {options.map((option, index) => (
+            <DropdownMenuSelectableItem
               key={index}
               onClick={() => {
                 setSelectedSortDirection(option);
@@ -66,19 +71,23 @@ export function SortDropdownButton<SortField>({
               }}
             >
               {option === 'asc' ? 'Ascending' : 'Descending'}
-            </DropdownButton.StyledDropdownItem>
+            </DropdownMenuSelectableItem>
-          ))
+          ))}
-        : [
+        </DropdownMenuItemsContainer>
-            <DropdownButton.StyledDropdownTopOption
+      ) : (
-              key={0}
+        [
-              onClick={() => setIsOptionUnfolded(true)}
+          <DropdownButton.StyledDropdownTopOption
-            >
+            key={0}
-              {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
+            onClick={() => setIsOptionUnfolded(true)}
+          >
+            {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
 
-              <DropdownButton.StyledDropdownTopOptionAngleDown />
+            <DropdownButton.StyledDropdownTopOptionAngleDown />
-            </DropdownButton.StyledDropdownTopOption>,
+          </DropdownButton.StyledDropdownTopOption>,
-            ...availableSorts.map((sort, index) => (
+          <DropdownMenuSeparator />,
-              <DropdownButton.StyledDropdownItem
+          <DropdownMenuItemsContainer>
+            {availableSorts.map((sort, index) => (
+              <DropdownMenuSelectableItem
                 key={index + 1}
                 onClick={() => {
                   setIsUnfolded(false);
@@ -89,9 +98,11 @@ export function SortDropdownButton<SortField>({
                   {sort.icon}
                 </DropdownButton.StyledIcon>
                 {sort.label}
-              </DropdownButton.StyledDropdownItem>
+              </DropdownMenuSelectableItem>
-            )),
+            ))}
-          ]}
+          </DropdownMenuItemsContainer>,
+        ]
+      )}
     </DropdownButton>
   );
 }

front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts

@@ -5,7 +5,7 @@ export function getOperandLabel(operand: FilterOperand | null | undefined) {
     case 'contains':
       return 'Contains';
     case 'does-not-contain':
-      return "Does'nt contain";
+      return "Doesn't contain";
     case 'greater-than':
       return 'Greater than';
     case 'less-than':

front/src/modules/ui/input/components/ImageInput.tsx

@@ -28,7 +28,8 @@ const Picture = styled.button<{ withPicture: boolean }>`
   width: 66px;
 
   img {
-    object-fit: cover;
+    height: 100%;
+    object-fit: fill;
     width: 100%;
   }
 

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const StyledPanel = styled.div`
   background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
   display: flex;
   flex-direction: row;

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const ShowPageLeftContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   border-bottom-left-radius: 8px;
-  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  border-right: 1px solid ${({ theme }) => theme.border.color.medium};
   border-top-left-radius: 8px;
   display: flex;
   flex-direction: column;

front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx

@@ -47,7 +47,7 @@ export function NavbarAnimatedContainer({ children, layout }: NavbarProps) {
         opacity: isMenuOpened ? 1 : 0,
       }}
       transition={{
-        duration: theme.animation.duration.visible,
+        duration: theme.animation.duration.normal,
       }}
     >
       {children}

front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx

@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuCheckableItem } from '@/ui/dropdown/components/DropdownMenuCheckableItem';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { Avatar } from '@/users/components/Avatar';
@@ -57,7 +57,7 @@ export function MultipleEntitySelect<
         autoFocus
       />
       <DropdownMenuSeparator />
-      <DropdownMenuItemContainer>
+      <DropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
           <DropdownMenuCheckableItem
             key={entity.id}
@@ -83,7 +83,7 @@ export function MultipleEntitySelect<
         {entitiesInDropdown?.length === 0 && (
           <DropdownMenuItem>No result</DropdownMenuItem>
         )}
-      </DropdownMenuItemContainer>
+      </DropdownMenuItemsContainer>
     </DropdownMenu>
   );
 }

front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx

@@ -2,8 +2,8 @@ import { useRef } from 'react';
 import { useTheme } from '@emotion/react';
 
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
-import { DropdownMenuButton } from '@/ui/dropdown/components/DropdownMenuButton';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
@@ -60,12 +60,12 @@ export function SingleEntitySelect<
       <DropdownMenuSeparator />
       {showCreateButton && (
         <>
-          <DropdownMenuItemContainer style={{ maxHeight: 180 }}>
+          <DropdownMenuItemsContainer hasMaxHeight>
-            <DropdownMenuButton onClick={onCreate}>
+            <DropdownMenuItem onClick={onCreate}>
               <IconPlus size={theme.icon.size.md} />
               Create new
-            </DropdownMenuButton>
+            </DropdownMenuItem>
-          </DropdownMenuItemContainer>
+          </DropdownMenuItemsContainer>
           <DropdownMenuSeparator />
         </>
       )}

front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
@@ -12,8 +13,7 @@ import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
-import { CompanyPickerSkeleton } from './skeletons/CompanyPickerSkeleton';
+import { DropdownMenuItemsContainerSkeleton } from './skeletons/DropdownMenuItemsContainerSkeleton';
-import { DropdownMenuItemContainerSkeleton } from './skeletons/DropdownMenuItemContainerSkeleton';
 
 export type EntitiesForSingleEntitySelect<
   CustomEntityForSelect extends EntityForSelect,
@@ -64,11 +64,11 @@ export function SingleEntitySelectBase<
   );
 
   return (
-    <DropdownMenuItemContainer ref={containerRef}>
+    <DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
       {entities.loading ? (
-        <DropdownMenuItemContainerSkeleton>
+        <DropdownMenuItemsContainerSkeleton>
-          <CompanyPickerSkeleton count={10} />
+          <Skeleton height={24} />
-        </DropdownMenuItemContainerSkeleton>
+        </DropdownMenuItemsContainerSkeleton>
       ) : entitiesInDropdown.length === 0 ? (
         <DropdownMenuItem>No result</DropdownMenuItem>
       ) : (
@@ -90,6 +90,6 @@ export function SingleEntitySelectBase<
           </DropdownMenuSelectableItem>
         ))
       )}
-    </DropdownMenuItemContainer>
+    </DropdownMenuItemsContainer>
   );
 }

front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx

@@ -1,35 +0,0 @@
-import Skeleton from 'react-loading-skeleton';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  count: number;
-};
-
-export const SkeletonContainer = styled.div`
-  align-items: center;
-  display: inline-flex;
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-  position: relative;
-  width: 100%;
-`;
-
-export const SkeletonEntityName = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-`;
-
-export function CompanyPickerSkeleton({ count }: OwnProps) {
-  const loadSkeletons = Array(count).fill(1);
-  return (
-    <>
-      {loadSkeletons.map((_, i) => (
-        <SkeletonContainer key={i}>
-          <Skeleton width={15} height={15} />
-          <SkeletonEntityName>
-            <Skeleton height={8} />
-          </SkeletonEntityName>
-        </SkeletonContainer>
-      ))}
-    </>
-  );
-}

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-
-export const DropdownMenuItemContainerSkeleton = styled.div`
-  --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
-  --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
-  align-items: center;
-
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.secondary};
-
-  font-size: ${({ theme }) => theme.font.size.sm};
-
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: calc(100% - 2 * var(--vertical-padding));
-
-  padding: var(--vertical-padding) var(--horizontal-padding);
-  width: calc(100% - 2 * var(--horizontal-padding));
-`;

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+export const DropdownMenuItemsContainerSkeleton = styled.div`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  color: blue;
+
+  height: calc(100% - 2 * var(--vertical-padding));
+
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  width: calc(100% - 2 * var(--horizontal-padding));
+`;

front/src/modules/ui/right-drawer/components/RightDrawer.tsx

@@ -51,17 +51,19 @@ export function RightDrawer() {
     return <></>;
   }
 
+  console.log(isRightDrawerOpen);
+
   return (
     <StyledContainer
       animate={{
         width: isRightDrawerOpen ? theme.rightDrawerWidth : '0',
       }}
       transition={{
-        duration: theme.animation.duration.visible,
+        duration: theme.animation.duration.normal,
       }}
     >
       <StyledRightDrawer ref={rightDrawerRef}>
-        <RightDrawerRouter />
+        {isRightDrawerOpen && <RightDrawerRouter />}
       </StyledRightDrawer>
     </StyledContainer>
   );

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -27,6 +27,7 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   editHotkeyScope?: HotkeyScope;
+  transparent?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -37,6 +38,7 @@ export function EditableCell({
   editModeContent,
   nonEditModeContent,
   editHotkeyScope,
+  transparent = false,
   onSubmit,
   onCancel,
 }: OwnProps) {
@@ -48,6 +50,7 @@ export function EditableCell({
     <CellBaseContainer>
       {isCurrentCellInEditMode ? (
         <EditableCellEditMode
+          transparent={transparent}
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}
           onSubmit={onSubmit}

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx

@@ -19,7 +19,7 @@ export const EditableCellNormalModeOuterContainer = styled.div<Props>`
   ${(props) =>
     props.softFocus
       ? `background: ${props.theme.background.transparent.secondary};
-         border-radius: ${props.theme.border.radius.md};
+         border-radius: ${props.theme.border.radius.sm};
          box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
       : ''}
 `;

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -7,8 +7,10 @@ import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandl
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
   align-items: center;
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: ${({ transparent, theme }) =>
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+    transparent ? 'none' : `1px solid ${theme.border.color.light}`};
+  border-radius: ${({ transparent, theme }) =>
+    transparent ? 'none' : theme.border.radius.sm};
   display: flex;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
@@ -16,18 +18,19 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
   margin-top: -1px;
 
   min-height: 100%;
+  min-width: 100%;
   position: absolute;
+
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-  width: 100%;
   z-index: 1;
-  ${overlayBackground}
+  ${({ transparent }) => (transparent ? '' : overlayBackground)};
 `;
 
 type OwnProps = {
   children: ReactElement;
+  transparent?: boolean;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   onOutsideClick?: () => void;
@@ -41,6 +44,7 @@ export function EditableCellEditMode({
   children,
   onCancel,
   onSubmit,
+  transparent = false,
 }: OwnProps) {
   const wrapperRef = useRef(null);
 
@@ -48,6 +52,7 @@ export function EditableCellEditMode({
 
   return (
     <EditableCellEditModeContainer
+      transparent={transparent}
       data-testid="editable-cell-edit-mode-container"
       ref={wrapperRef}
       editModeHorizontalAlign={editModeHorizontalAlign}

front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx

@@ -9,7 +9,7 @@ import { useEditableCell } from '../hooks/useEditableCell';
 
 const EditableCellDateEditModeContainer = styled.div`
   margin-top: -1px;
-  width: inherit;
+  width: 100%;
 `;
 
 export type EditableDateProps = {

front/src/modules/ui/themes/animation.ts

@@ -1,6 +1,7 @@
 export const animation = {
   duration: {
-    instant: 0.1,
+    instant: 0.075,
-    visible: 0.3,
+    fast: 0.15,
+    normal: 0.3,
   },
 };

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -24,7 +24,7 @@ export const SortByName: Story = {
     const sortButton = await canvas.findByText('Sort');
     await userEvent.click(sortButton);
 
-    const nameSortButton = canvas.getByText('Name', { selector: 'li' });
+    const nameSortButton = canvas.getByText('Name', { selector: 'li > div' });
     await userEvent.click(nameSortButton);
 
     expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -25,7 +25,7 @@ export const Email: Story = {
     const sortButton = await canvas.findByText('Sort');
     await userEvent.click(sortButton);
 
-    const emailSortButton = canvas.getByText('Email', { selector: 'li' });
+    const emailSortButton = canvas.getByText('Email', { selector: 'li > div' });
     await userEvent.click(emailSortButton);
 
     expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
@@ -45,7 +45,7 @@ export const Cancel: Story = {
     const sortButton = await canvas.findByText('Sort');
     await userEvent.click(sortButton);
 
-    const emailSortButton = canvas.getByText('Email', { selector: 'li' });
+    const emailSortButton = canvas.getByText('Email', { selector: 'li > div' });
     await userEvent.click(emailSortButton);
 
     expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();