From 6e42af0b701d8f251385882250cfc34e157d076c Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Fri, 20 Oct 2023 00:39:56 -0400
Subject: [PATCH] Make report card more bearable on mobile

---
 components/ReportCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/ReportCard.tsx b/components/ReportCard.tsx
index ed19af3..a3fc65e 100644
--- 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>,
               );
             }