Set container width by device type

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>