diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx index 42e39fe..d9bf548 100644 --- a/app/routes/mod-queue.tsx +++ b/app/routes/mod-queue.tsx @@ -364,24 +364,42 @@ export default function () { ); const ToolsContent = ( - <PopoverContent> - <PopoverArrow /> - <PopoverCloseButton /> - <PopoverHeader>Tools</PopoverHeader> - <PopoverBody> - <VStack> - {pageProps.item_types.map((item) => ( - <Button - key={item.value} - onClick={() => itemModals[item.value].onOpen()} - w="100%" - > - {item.name} - </Button> - ))} - </VStack> - </PopoverBody> - </PopoverContent> + <Popover placement="bottom-end"> + <PopoverTrigger> + <Button ml="8px"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + fill="currentColor" + viewBox="0 0 16 16" + > + <path + fillRule="evenodd" + d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" + /> + </svg> + </Button> + </PopoverTrigger> + <PopoverContent> + <PopoverArrow /> + <PopoverCloseButton /> + <PopoverHeader>Tools</PopoverHeader> + <PopoverBody> + <VStack> + {pageProps.item_types.map((item) => ( + <Button + key={item.value} + onClick={() => itemModals[item.value].onOpen()} + w="100%" + > + {item.name} + </Button> + ))} + </VStack> + </PopoverBody> + </PopoverContent> + </Popover> ); return ( @@ -434,25 +452,7 @@ export default function () { <Box display={isDesktop ? undefined : "none"} ml="16px" w="248px"> <HStack> {ItemDisplay} - <Popover placement="bottom-end"> - <PopoverTrigger> - <Button ml="8px"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="currentColor" - viewBox="0 0 16 16" - > - <path - fillRule="evenodd" - d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" - /> - </svg> - </Button> - </PopoverTrigger> - {ToolsContent} - </Popover> + {ToolsContent} </HStack> </Box> </Flex>