IO-2317 Messaging screen on mobile

client/src/components/chat-conversation-title/chat-conversation-title.component.jsx

@@ -1,14 +1,31 @@
-import { Space } from "antd";
+import { Space, Button, Col } from "antd";
 import React from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatLabelComponent from "../chat-label/chat-label.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
+import { connect } from "react-redux";
+import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
+import { LeftOutlined } from "@ant-design/icons";
 
-export default function ChatConversationTitle({ conversation }) {
+const mapDispatchToProps = (dispatch) => ({
+  setSelectedConversation: (conversationId) =>
+    dispatch(setSelectedConversation(conversationId)),
+});
+
+function ChatConversationTitle({ conversation, setSelectedConversation }) {
   return (
     <Space wrap>
+      <Col sm={0}>
+        <Button
+          onClick={() => setSelectedConversation()}
+          size="small"
+          type="text"
+        >
+          <LeftOutlined />
+        </Button>
+      </Col>
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
@@ -23,3 +40,5 @@ export default function ChatConversationTitle({ conversation }) {
     </Space>
   );
 }
+
+export default connect(null, mapDispatchToProps)(ChatConversationTitle);

client/src/components/chat-popup/chat-popup.component.jsx

@@ -112,7 +112,7 @@ export function ChatPopupComponent({
             />
 
             <Row gutter={[8, 8]} className="chat-popup-content">
-              <Col span={8}>
+              <Col span={8} sm={8} xs={selectedConversation && 0}>
                 {loading ? (
                   <LoadingSpinner />
                 ) : (