Place ID below name

components/AppealCard.tsx

@@ -31,11 +31,12 @@ export default function (props: {
 
   return (
     <>
-      <Card>
+      <Card w="100%">
         <CardHeader>
           <Heading size="md">
             Appeal for {props.username}#{props.discriminator}
           </Heading>
+          <Text fontSize="xs">ID: {props.id}</Text>
         </CardHeader>
         <CardBody>
           <Stack divider={<StackDivider />}>
@@ -53,20 +54,18 @@ export default function (props: {
               </Heading>
               <Text>{props.learned}</Text>
             </Box>
+          </Stack>
+        </CardBody>
+        <CardFooter pb="4px">
           <Box>
             <Button colorScheme="red">Deny</Button>
             <Button colorScheme="blue" ml="8px">
               Accept
             </Button>
           </Box>
-          </Stack>
-        </CardBody>
-        <CardFooter>
-          <Text fontSize="xs">
-            Submitted at: {dateString}
-            <br />
-            ID: {props.id}
-          </Text>
+        </CardFooter>
+        <CardFooter py="4px">
+          <Text fontSize="xs">Submitted at: {dateString}</Text>
         </CardFooter>
       </Card>
     </>