Fix ScenarioEditor padding

This commit is contained in:
David Corbitt
2023-07-20 13:38:46 -07:00
parent 55c077d604
commit e885bdd365

View File

@@ -74,9 +74,8 @@ export default function ScenarioEditor({
return ( return (
<HStack <HStack
alignItems="flex-start" alignItems="flex-start"
pr={cellPadding.x} px={cellPadding.x}
py={cellPadding.y} py={cellPadding.y}
pl={canModify ? 0 : cellPadding.x}
spacing={0} spacing={0}
height="100%" height="100%"
draggable={!variableInputHovered} draggable={!variableInputHovered}
@@ -97,35 +96,36 @@ export default function ScenarioEditor({
onDrop={onReorder} onDrop={onReorder}
backgroundColor={isDragTarget ? "gray.100" : "transparent"} backgroundColor={isDragTarget ? "gray.100" : "transparent"}
> >
{canModify && ( {canModify && props.canHide && (
<Stack alignSelf="flex-start" opacity={props.hovered ? 1 : 0} spacing={0}> <Stack
{props.canHide && ( alignSelf="flex-start"
<> opacity={props.hovered ? 1 : 0}
<Tooltip label="Hide scenario" hasArrow> spacing={0}
{/* for some reason the tooltip can't position itself properly relative to the icon without the wrapping box */} ml={-cellPadding.x}
<Button >
variant="unstyled" <Tooltip label="Hide scenario" hasArrow>
color="gray.400" {/* for some reason the tooltip can't position itself properly relative to the icon without the wrapping box */}
height="unset" <Button
width="unset" variant="unstyled"
minW="unset" color="gray.400"
onClick={onHide} height="unset"
_hover={{ width="unset"
color: "gray.800", minW="unset"
cursor: "pointer", onClick={onHide}
}} _hover={{
> color: "gray.800",
<Icon as={hidingInProgress ? Spinner : BsX} boxSize={6} /> cursor: "pointer",
</Button> }}
</Tooltip> >
<Icon <Icon as={hidingInProgress ? Spinner : BsX} boxSize={hidingInProgress ? 4 : 6} />
as={RiDraggable} </Button>
boxSize={6} </Tooltip>
color="gray.400" <Icon
_hover={{ color: "gray.800", cursor: "pointer" }} as={RiDraggable}
/> boxSize={6}
</> color="gray.400"
)} _hover={{ color: "gray.800", cursor: "pointer" }}
/>
</Stack> </Stack>
)} )}