Hide mod tools popover on smaller screens

app/routes/mod-queue.tsx

@@ -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%"

app/styles/mod-queue.css

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