From 491d48467c88f649dc121f372b6a3966b70dd06c Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Thu, 19 Oct 2023 16:49:23 -0400
Subject: [PATCH] Set container width by device type

---
 app/routes/mod-queue.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
index 833cc2e..39333cf 100644
--- a/app/routes/mod-queue.tsx
+++ b/app/routes/mod-queue.tsx
@@ -67,6 +67,12 @@ export async function loader({ context }: { context: RequestContext }) {
   };
 }
 
+export function meta() {
+  return {
+    title: "Moderation Queue - Car Crushers",
+  };
+}
+
 export default function () {
   const pageProps = useLoaderData<typeof loader>();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
@@ -74,7 +80,11 @@ export default function () {
   const [entries, setEntries] = useState([] as JSX.Element[]);
 
   for (const type of pageProps.entry_types)
-    entryTypes.push(<option value={type.value}>{type.name}</option>);
+    entryTypes.push(
+      <option key={type.value} value={type.value}>
+        {type.name}
+      </option>
+    );
 
   async function updateQueue(
     queue_type: string,
@@ -126,12 +136,11 @@ export default function () {
   return (
     <Container maxW="container.lg">
       <Flex>
-        <VStack w="container.md">{entries}</VStack>
-        <Box display={isDesktop ? undefined : "none"} w="256px">
-          <Select placeholder="Entry Type">
-            <option value="">All</option>
-            {entryTypes}
-          </Select>
+        <VStack w={isDesktop ? "container.md" : "container.lg"}>
+          {entries}
+        </VStack>
+        <Box display={isDesktop ? undefined : "none"} ml="16px" w="248px">
+          <Select>{entryTypes}</Select>
         </Box>
       </Flex>
     </Container>