Make report card more bearable on mobile

regalijan · Oct 20, 2023 · 6e42af0 · 6e42af0
1 parent 98a56f2
commit 6e42af0
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/components/ReportCard.tsx b/components/ReportCard.tsx
@@ -13,6 +13,7 @@ import {
   Stack,
   Text,
   useToast,
+  VStack,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -130,7 +131,7 @@ export default function (props: ReportCardProps) {
         <Text my="16px">{props.description}</Text>
       </CardBody>
       <CardFooter>
-        <Stack direction="column">
+        <Stack direction="column" gap="16px">
           {(function () {
             const radioGroups = [];
             for (let i = 0; i < props.target_ids.length; i++) {
@@ -141,7 +142,7 @@ export default function (props: ReportCardProps) {
                     actionMap[props.target_ids[i]] = parseInt(val);
                   }}
                 >
-                  <Stack direction="row">
+                  <VStack alignItems="flex-start">
                     <Text>{props.target_usernames[i]}</Text>
                     <Radio key={0} value="0">
                       Ignore
@@ -152,7 +153,7 @@ export default function (props: ReportCardProps) {
                     <Radio key={2} value="2">
                       Ban
                     </Radio>
-                  </Stack>
+                  </VStack>
                 </RadioGroup>,
               );
             }