Hide mod tools popover on smaller screens

This commit is contained in:
2023-11-06 12:38:00 -05:00
parent 4290701d57
commit 5fc8a53d4e
2 changed files with 12 additions and 1 deletions

View File

@ -18,6 +18,7 @@ import {
useToast,
VStack,
} from "@chakra-ui/react";
import stylesheet from "../styles/mod-queue.css";
import {
type MutableRefObject,
type ReactNode,
@ -25,6 +26,7 @@ import {
useRef,
useState,
} from "react";
import { LinksFunction } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";
import AppealBans from "../../components/AppealBans.js";
import AppealCard from "../../components/AppealCard.js";
@ -35,6 +37,10 @@ import ReportCard from "../../components/ReportCard.js";
import NewInactivityNotice from "../../components/NewInactivityNotice.js";
import InactivityNoticeCard from "../../components/InactivityNoticeCard.js";
export const links: LinksFunction = () => {
return [{ href: stylesheet, rel: "stylesheet" }];
};
export async function loader({ context }: { context: RequestContext }) {
const { current_user: currentUser } = context.data;
@ -410,7 +416,7 @@ export default function () {
{ItemDisplay}
</Box>
</Flex>
<Popover placement="top-end">
<Popover id="mod-tools" placement="top-end">
<PopoverTrigger>
<Button
borderRadius="50%"

5
app/styles/mod-queue.css Normal file
View File

@ -0,0 +1,5 @@
@media (max-width: 1280px) {
#mod-tools {
display: none;
}
}