From 1b190210b3ab3f8d4277d7e23c5518d2f5ab9d88 Mon Sep 17 00:00:00 2001
From: Thomas Kam <thomassth@users.noreply.github.com>
Date: Sun, 14 Jul 2024 02:55:32 -0400
Subject: [PATCH] more mobile view

---
 .../conversation-admin/CheckboxField.js       | 38 +++++++++----------
 .../comment-moderation/comment.js             |  4 +-
 .../comment-moderation/index.js               |  8 ++--
 .../conversation-admin/conversation-config.js | 10 +++--
 .../conversation-admin/seed-comment.js        |  1 +
 .../stats/conversation-stats-number-card.js   |  2 +-
 .../conversations-and-account/conversation.js |  1 +
 7 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/client-admin/src/components/conversation-admin/CheckboxField.js b/client-admin/src/components/conversation-admin/CheckboxField.js
index 4be6fa4fc7..18210e7d31 100644
--- a/client-admin/src/components/conversation-admin/CheckboxField.js
+++ b/client-admin/src/components/conversation-admin/CheckboxField.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Box, Flex, Text } from 'theme-ui'
+import { Flex } from 'theme-ui'
 import PropTypes from 'prop-types'
 
 import { handleZidMetadataUpdate } from '../../actions'
@@ -32,25 +32,23 @@ export const CheckboxField = ({
   }
 
   return (
-    <Flex sx={{ alignItems: 'flex-start', mb: [3] }}>
-      <Box sx={{ flexShrink: 0, position: 'relative', top: -0.5 }}>
-        <input
-          type="checkbox"
-          label={label}
-          data-test-id={field}
-          checked={
-            isIntegerBool ? zid_metadata[field] === 1 : zid_metadata[field]
-          }
-          onChange={
-            isIntegerBool
-              ? () => handleIntegerBoolValueChange(field)
-              : () => handleBoolValueChange(field)
-          }
-        />
-      </Box>
-      <Box sx={{ ml: [2], flexShrink: 0, maxWidth: '35em' }}>
-        <Text>{children}</Text>
-      </Box>
+    <Flex sx={{ alignItems: 'flex-start', mb: [3], gap: [2] }}>
+      <input
+        type="checkbox"
+        id={field}
+        value={field}
+        label={label}
+        data-test-id={field}
+        checked={
+          isIntegerBool ? zid_metadata[field] === 1 : zid_metadata[field]
+        }
+        onChange={
+          isIntegerBool
+            ? () => handleIntegerBoolValueChange(field)
+            : () => handleBoolValueChange(field)
+        }
+      />
+      <label htmlFor={field}>{children}</label>
     </Flex>
   )
 }
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 af51b377d5..eb51287ea3 100644
--- a/client-admin/src/components/conversation-admin/comment-moderation/comment.js
+++ b/client-admin/src/components/conversation-admin/comment-moderation/comment.js
@@ -25,7 +25,7 @@ class Comment extends React.Component {
 
   render() {
     return (
-      <Card sx={{ mb: [3], minWidth: '35em' }}>
+      <Card sx={{ mb: [3], width: '35em', maxWidth: '100%' }}>
         <Box>
           <Text sx={{ mb: [3] }}>{this.props.comment.txt}</Text>
           <Flex
@@ -48,7 +48,7 @@ class Comment extends React.Component {
                 </Button>
               ) : null}
             </Box>
-            <Flex sx={{ alignItems: 'center' }}>
+            <Flex sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
               <Link
                 target="_blank"
                 sx={{ mr: [2] }}
diff --git a/client-admin/src/components/conversation-admin/comment-moderation/index.js b/client-admin/src/components/conversation-admin/comment-moderation/index.js
index 012b498043..4a47d116a5 100644
--- a/client-admin/src/components/conversation-admin/comment-moderation/index.js
+++ b/client-admin/src/components/conversation-admin/comment-moderation/index.js
@@ -67,14 +67,14 @@ class CommentModeration extends React.Component {
           }}>
           Moderate
         </Heading>
-        <Flex sx={{ mb: [4] }}>
+        <Flex sx={{ mb: [4], flexWrap: 'wrap' }}>
           <Link
             sx={{
               mr: [4],
               variant: url ? 'links.nav' : 'links.activeNav'
             }}
             to={`${match.url}`}>
-            Unmoderated{' '}
+            Unmoderated<br />
             {this.props.unmoderated.unmoderated_comments
               ? this.props.unmoderated.unmoderated_comments.length
               : null}
@@ -85,7 +85,7 @@ class CommentModeration extends React.Component {
               variant: url === 'accepted' ? 'links.activeNav' : 'links.nav'
             }}
             to={`${match.url}/accepted`}>
-            Accepted{' '}
+            Accepted<br />
             {this.props.accepted.accepted_comments
               ? this.props.accepted.accepted_comments.length
               : null}
@@ -96,7 +96,7 @@ class CommentModeration extends React.Component {
               variant: url === 'rejected' ? 'links.activeNav' : 'links.nav'
             }}
             to={`${match.url}/rejected`}>
-            Rejected{' '}
+            Rejected<br />
             {this.props.rejected.rejected_comments
               ? this.props.rejected.rejected_comments.length
               : null}
diff --git a/client-admin/src/components/conversation-admin/conversation-config.js b/client-admin/src/components/conversation-admin/conversation-config.js
index ae8d18cbd9..e5ed59f7fb 100644
--- a/client-admin/src/components/conversation-admin/conversation-config.js
+++ b/client-admin/src/components/conversation-admin/conversation-config.js
@@ -10,7 +10,7 @@ import {
 } from '../../actions'
 import ComponentHelpers from '../../util/component-helpers'
 import NoPermission from './no-permission'
-import { Heading, Box, Text, jsx } from 'theme-ui'
+import { Heading, Box, Text, jsx, Label } from 'theme-ui'
 import emoji from 'react-easy-emoji'
 
 import { CheckboxField } from './CheckboxField'
@@ -76,18 +76,20 @@ class ConversationConfig extends React.Component {
         </CheckboxField>
 
         <Box sx={{ mb: [3] }}>
-          <Text sx={{ mb: [2] }}>Topic</Text>
+          <Label htmlFor="topic" sx={{ mb: [2] }}>Topic</Label>
           <input
             ref={(c) => (this.topic = c)}
             sx={{
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               borderRadius: 2,
               padding: [2],
               border: '1px solid',
               borderColor: 'mediumGray'
             }}
+            name="topic"
             data-test-id="topic"
             onBlur={this.handleStringValueChange('topic').bind(this)}
             onChange={this.handleConfigInputTyping('topic').bind(this)}
@@ -96,13 +98,14 @@ class ConversationConfig extends React.Component {
         </Box>
 
         <Box sx={{ mb: [3] }}>
-          <Text sx={{ mb: [2] }}>Description</Text>
+          <Label htmlFor="description" sx={{ mb: [2] }}>Description</Label>
           <textarea
             ref={(c) => (this.description = c)}
             sx={{
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               height: '7em',
               resize: 'none',
               padding: [2],
@@ -110,6 +113,7 @@ class ConversationConfig extends React.Component {
               border: '1px solid',
               borderColor: 'mediumGray'
             }}
+            name="description"
             data-test-id="description"
             onBlur={this.handleStringValueChange('description').bind(this)}
             onChange={this.handleConfigInputTyping('description').bind(this)}
diff --git a/client-admin/src/components/conversation-admin/seed-comment.js b/client-admin/src/components/conversation-admin/seed-comment.js
index 26c3460943..1710872166 100644
--- a/client-admin/src/components/conversation-admin/seed-comment.js
+++ b/client-admin/src/components/conversation-admin/seed-comment.js
@@ -64,6 +64,7 @@ class ModerateCommentsSeed extends React.Component {
               fontFamily: 'body',
               fontSize: [2],
               width: '35em',
+              maxWidth: '100%',
               height: '7em',
               resize: 'none',
               padding: [2],
diff --git a/client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js b/client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js
index 1a45a5cbec..e23301f863 100644
--- a/client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js
+++ b/client-admin/src/components/conversation-admin/stats/conversation-stats-number-card.js
@@ -8,7 +8,7 @@ class NumberCard extends React.Component {
   render() {
     return (
       <Flex sx={{ my: [2] }}>
-        <Text sx={{ fontWeight: 700, mr: [2] }}>{this.props.datum}</Text>
+        <Text sx={{ fontWeight: 700, mr: [2], minWidth: 'unset' }}>{this.props.datum}</Text>
         <Text> {this.props.subheading} </Text>
       </Flex>
     )
diff --git a/client-admin/src/components/conversations-and-account/conversation.js b/client-admin/src/components/conversations-and-account/conversation.js
index ba0392913d..fa12b940ed 100644
--- a/client-admin/src/components/conversations-and-account/conversation.js
+++ b/client-admin/src/components/conversations-and-account/conversation.js
@@ -13,6 +13,7 @@ function Conversation({ c, i, goToConversation }) {
       <Text data-test-id="embed-page">
         {c.parent_url ? `Embedded on ${c.parent_url}` : null}
       </Text>
+      <br />
       <Text sx={{ mt: [2] }}>{c.participant_count} participants</Text>
     </Card>
   )