Use flex instead of grid for context menu item

This commit is contained in:
jeffvli 2023-02-08 11:46:02 -08:00
parent 9dcc42ff28
commit 17d5ef1f6b

View file

@ -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>
); );
}, },