From 75d04151cc18823d4318a62a403f2014f09ae5a3 Mon Sep 17 00:00:00 2001
From: Thomas Kam <thomassth@users.noreply.github.com>
Date: Sat, 27 Jul 2024 01:00:03 -0400
Subject: [PATCH] comment blocks

---
 .../comment-moderation/comment.js                  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client-admin/src/components/conversation-admin/comment-moderation/comment.js b/client-admin/src/components/conversation-admin/comment-moderation/comment.js
index eb51287ea..5b94fb0c7 100644
--- a/client-admin/src/components/conversation-admin/comment-moderation/comment.js
+++ b/client-admin/src/components/conversation-admin/comment-moderation/comment.js
@@ -3,7 +3,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Flex, Box, Text, Button, Card, Link } from 'theme-ui'
+import { Flex, Text, Button, Card, Link } from 'theme-ui'
 
 @connect((state) => {
   return {
@@ -26,18 +26,18 @@ class Comment extends React.Component {
   render() {
     return (
       <Card sx={{ mb: [3], width: '35em', maxWidth: '100%' }}>
-        <Box>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Text sx={{ mb: [3] }}>{this.props.comment.txt}</Text>
           <Flex
             sx={{
               justifyContent: 'space-between',
               alignItems: 'center',
-              width: '100%'
+              width: '100%',
+              flexWrap: 'wrap'
             }}>
-            <Box>
+            <Flex sx={{ gap: '1rem', flexWrap: 'wrap' }} className='buttons'>
               {this.props.acceptButton ? (
                 <Button
-                  sx={{ mr: [3] }}
                   onClick={this.onAcceptClicked.bind(this)}>
                   {this.props.acceptButtonText}
                 </Button>
@@ -47,7 +47,7 @@ class Comment extends React.Component {
                   {this.props.rejectButtonText}
                 </Button>
               ) : null}
-            </Box>
+            </Flex>
             <Flex sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
               <Link
                 target="_blank"
@@ -66,7 +66,7 @@ class Comment extends React.Component {
               ) : null}
             </Flex>
           </Flex>
-        </Box>
+        </Flex>
       </Card>
     )
   }