Set container width by device type

regalijan · Oct 19, 2023 · 491d484 · 491d484
1 parent 4409b29
commit 491d484
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
@@ -67,14 +67,24 @@ 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 });
   const entryTypes = [];
   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>