Use flex instead of grid for context menu item
This commit is contained in:
parent
9dcc42ff28
commit
17d5ef1f6b
1 changed files with 8 additions and 21 deletions
|
@ -1,5 +1,5 @@
|
||||||
import { forwardRef, ReactNode, Ref } from 'react';
|
import { forwardRef, ReactNode, Ref } from 'react';
|
||||||
import { Grid, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
|
import { Box, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
|
||||||
import { motion, Variants } from 'framer-motion';
|
import { motion, Variants } from 'framer-motion';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
@ -75,26 +75,13 @@ export const ContextMenuButton = forwardRef(
|
||||||
disabled={props.disabled}
|
disabled={props.disabled}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
>
|
>
|
||||||
<Grid>
|
<Group position="apart">
|
||||||
<Grid.Col
|
<Group spacing="md">
|
||||||
span={2}
|
<Box>{leftIcon}</Box>
|
||||||
sx={{ alignSelf: 'center' }}
|
<Box mr="2rem">{children}</Box>
|
||||||
>
|
</Group>
|
||||||
{leftIcon}
|
<Box>{rightIcon}</Box>
|
||||||
</Grid.Col>
|
</Group>
|
||||||
<Grid.Col span={8}>{children} </Grid.Col>
|
|
||||||
<Grid.Col
|
|
||||||
span={2}
|
|
||||||
sx={{ alignSelf: 'center' }}
|
|
||||||
>
|
|
||||||
<Group
|
|
||||||
align="flex-end"
|
|
||||||
position="right"
|
|
||||||
>
|
|
||||||
{rightIcon}
|
|
||||||
</Group>
|
|
||||||
</Grid.Col>
|
|
||||||
</Grid>
|
|
||||||
</StyledContextMenuButton>
|
</StyledContextMenuButton>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
Reference in a new issue