Set display: none instead of visibility: hidden to reduce wasted space

components/ReportCard.tsx

@@ -13,11 +13,11 @@ import {
   Stack,
   Text,
   useToast,
-  VStack,
+  VStack
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function (props: ReportCardProps) {
+export default function(props: ReportCardProps) {
   const [attachmentIdx, setAttachmentIdx] = useState(0);
   const [loading, setLoading] = useState(false);
   const toast = useToast();
@@ -26,7 +26,7 @@ export default function (props: ReportCardProps) {
 
   for (let i = 0; i < props.target_ids.length; i++)
     Object.defineProperty(targetMap, props.target_ids[i], {
-      value: props.target_usernames[i],
+      value: props.target_usernames[i]
     });
 
   async function submitActions() {
@@ -34,9 +34,9 @@ export default function (props: ReportCardProps) {
     const submitReq = await fetch(`/api/reports/${props.id}/action`, {
       body: JSON.stringify(actionMap),
       headers: {
-        "content-type": "application/json",
+        "content-type": "application/json"
       },
-      method: "POST",
+      method: "POST"
     });
 
     if (!submitReq.ok) {
@@ -44,7 +44,7 @@ export default function (props: ReportCardProps) {
       toast({
         description: ((await submitReq.json()) as { error: string }).error,
         status: "error",
-        title: "S̸̯̜̈́o̴̳̅̾̏̽m̴͔͕̈́̋ē̴̙͓̯̍̃ț̸͖̘̀h̶̛̳̝̐i̵̋͘͜ņ̷̙̤͌g̴̭̻̓̈́ ̴̘͍̦̪̆w̸̡̏̑̊é̸̠̖̹̂͜n̴̖̳̤̕t̴͚̊̊̕ ̸̛͙̺̬̎́w̴͈͑̋͊r̷̢̛o̵̱̩̍͋ͅṇ̸̝̰̮́g̵̡̢̦͕͂",
+        title: "S̸̯̜̈́o̴̳̅̾̏̽m̴͔͕̈́̋ē̴̙͓̯̍̃ț̸͖̘̀h̶̛̳̝̐i̵̋͘͜ņ̷̙̤͌g̴̭̻̓̈́ ̴̘͍̦̪̆w̸̡̏̑̊é̸̠̖̹̂͜n̴̖̳̤̕t̴͚̊̊̕ ̸̛͙̺̬̎́w̴͈͑̋͊r̷̢̛o̵̱̩̍͋ͅṇ̸̝̰̮́g̵̡̢̦͕͂"
       });
 
       return;
@@ -53,7 +53,7 @@ export default function (props: ReportCardProps) {
     toast({
       description: "Actions were successfully applied",
       status: "success",
-      title: "Success",
+      title: "Success"
     });
     setLoading(false);
     location.reload();
@@ -130,9 +130,9 @@ export default function (props: ReportCardProps) {
         <br />
         <Text my="16px">{props.description}</Text>
       </CardBody>
-      <CardFooter visibility={props.open ? "visible" : "hidden"}>
+      <CardFooter display={props.open ? undefined : "none"}>
         <Stack direction="column" gap="16px">
-          {(function () {
+          {(function() {
             const radioGroups = [];
             for (let i = 0; i < props.target_ids.length; i++) {
               radioGroups.push(
@@ -154,7 +154,7 @@ export default function (props: ReportCardProps) {
                       Ban
                     </Radio>
                   </VStack>
-                </RadioGroup>,
+                </RadioGroup>
               );
             }