admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

1584/fix/dropdown item width not correct (#1950)

Browse Source 
* added full width to new button

* removed scrollbar width in dropdown item

* Fix dropdown width issue

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abhishek Thory
2023-10-10 02:07:26 +05:30
committed by GitHub
parent e1c0cb7821
commit 29c013f826
24 changed files with 137 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -2,9 +2,9 @@ import { useEffect, useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { LightIconButton } from '@/ui/button/components/LightIconButton';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { IconComponent } from '@/ui/icon/types/IconComponent';
@ -19,7 +19,7 @@ const StyledIconPickerDropdownMenu = styled(StyledDropdownMenu)`
width: 176px;
`;
const StyledMenuIconItemsContainer = styled(StyledDropdownMenuItemsContainer)`
const StyledMenuIconItemsContainer = styled(DropdownMenuItemsContainer)`
flex-direction: row;
flex-wrap: wrap;
height: auto;

6
front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx
View File

@ -1,9 +1,9 @@
import { useRef } from 'react';
import debounce from 'lodash.debounce';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { MenuItemMultiSelectAvatar } from '@/ui/menu-item/components/MenuItemMultiSelectAvatar';
@ -79,7 +79,7 @@ export const MultipleEntitySelect = <
autoFocus
/>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
{entitiesInDropdown?.map((entity) => (
<MenuItemMultiSelectAvatar
key={entity.id}
@ -100,7 +100,7 @@ export const MultipleEntitySelect = <
/>
))}
{entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</StyledDropdownMenu>
);
};

14
front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -1,7 +1,7 @@
import { useRef } from 'react';
import { Key } from 'ts-key-enum';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { IconPlus } from '@/ui/icon';
import { IconComponent } from '@/ui/icon/types/IconComponent';
@ -102,8 +102,8 @@ export const SingleEntitySelectBase = <
);
return (
<>
<StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
<div ref={containerRef}>
<DropdownMenuItemsContainer hasMaxHeight>
{loading ? (
<DropdownMenuSkeletonItem />
) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
@ -151,10 +151,10 @@ export const SingleEntitySelectBase = <
))}
</>
)}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
{showCreateButton && (
<>
<StyledDropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight>
<StyledDropdownMenuSeparator />
<CreateNewButton
onClick={onCreate}
@ -162,9 +162,9 @@ export const SingleEntitySelectBase = <
text="Add New"
hovered={preselectedOptionId === CreateButtonId}
/>
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</>
)}
</>
</div>
);
};