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

* 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

View File

@ -1,5 +1,5 @@
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
@ -53,7 +53,7 @@ export const DataTableColumnDropdownMenu = ({
<></>
) : (
<StyledDropdownMenu>
<StyledDropdownMenuItemsContainer>
<DropdownMenuItemsContainer>
{!isFirstColumn && (
<MenuItem
LeftIcon={IconArrowLeft}
@ -73,7 +73,7 @@ export const DataTableColumnDropdownMenu = ({
onClick={handleColumnVisibility}
text="Hide"
/>
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</StyledDropdownMenu>
);
};

View File

@ -1,8 +1,8 @@
import { ComponentProps, useCallback, useRef } from 'react';
import styled from '@emotion/styled';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
import { IconPlus } from '@/ui/icon';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@ -53,7 +53,7 @@ export const DataTableHeaderPlusButton = ({
return (
// eslint-disable-next-line twenty/no-spread-props
<StyledHeaderPlusButton {...props} ref={ref}>
<StyledDropdownMenuItemsContainer>
<DropdownMenuItemsContainer>
{hiddenTableColumns.map((column) => (
<MenuItem
key={column.key}
@ -67,7 +67,7 @@ export const DataTableHeaderPlusButton = ({
text={column.name}
/>
))}
</StyledDropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</StyledHeaderPlusButton>
);
};