mobile friendly

src/components/Group/AddGroup.tsx

@@ -103,7 +103,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
       })
 
      await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "createGroup",
             payload: {

src/components/Group/AddGroupList.tsx

@@ -108,7 +108,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
           })
       setIsLoading(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "joinGroup",
             payload: {

src/components/Group/Forum/GroupMail.tsx

@@ -123,7 +123,7 @@ export const GroupMail = ({
   const updateThreadActivity = async ({threadId, qortalName, groupId, thread}) => {
     try {
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "updateThreadActivity",
             payload: {
@@ -656,6 +656,11 @@ export const GroupMail = ({
               thread?.threadData?.createdAt < hasViewedRecent?.timestamp;
             return (
               <SingleThreadParent
+              sx={{
+                flexWrap: 'wrap',
+                gap: '15px',
+                height: 'auto'
+              }}
                 onClick={() => {
                   setCurrentThread(thread);
                   if(thread?.threadId && thread?.threadData?.name){

src/components/Group/Forum/NewThread.tsx

@@ -94,7 +94,7 @@ export const publishGroupEncryptedResource = async ({
   identifier,
 }) => {
   return new Promise((res, rej) => {
-    chrome.runtime.sendMessage(
+    chrome?.runtime?.sendMessage(
       {
         action: "publishGroupEncryptedResource",
         payload: {
@@ -117,7 +117,7 @@ export const publishGroupEncryptedResource = async ({
 export const encryptSingleFunc = async (data: string, secretKeyObject: any) => {
   try {
     return new Promise((res, rej) => {
-      chrome.runtime.sendMessage(
+      chrome?.runtime?.sendMessage(
         {
           action: "encryptSingle",
           payload: {

src/components/Group/Forum/ReusableModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box, Modal, useTheme } from '@mui/material'
+import { isMobile } from '../../../App'
 
 interface MyModalProps {
   open: boolean
@@ -40,7 +41,7 @@ export const ReusableModal: React.FC<MyModalProps> = ({
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: '75%',
+          width: isMobile ? '95%' : '75%',
           bgcolor: theme.palette.primary.main,
           boxShadow: 24,
           p: 4,

src/components/Group/InviteMember.tsx

@@ -26,7 +26,7 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
       setIsLoadingInvite(true)
       if (!expiryTime || !value) return;
       new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "inviteToGroup",
             payload: {

src/components/Group/ListOfBans.tsx

@@ -74,7 +74,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
       })
       setIsLoadingUnban(true)
       new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "cancelBan", payload: {
+          chrome?.runtime?.sendMessage({ action: "cancelBan", payload: {
               groupId,
               qortalAddress: address,
         }}, (response) => {

src/components/Group/ListOfInvites.tsx

@@ -75,7 +75,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
       })
       setIsLoadingCancelInvite(true)
       await new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "cancelInvitationToGroup", payload: {
+          chrome?.runtime?.sendMessage({ action: "cancelInvitationToGroup", payload: {
               groupId,
               qortalAddress: address,
         }}, (response) => {

src/components/Group/ListOfJoinRequests.tsx

@@ -74,7 +74,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
       })
       setIsLoadingAccept(true)
       await new Promise((res, rej)=> {
-          chrome.runtime.sendMessage({ action: "inviteToGroup", payload: {
+          chrome?.runtime?.sendMessage({ action: "inviteToGroup", payload: {
             groupId,
             qortalAddress: address,
             inviteTime: 10800,

src/components/Group/ListOfMembers.tsx

@@ -63,7 +63,7 @@ const ListOfMembers = ({
 
       setIsLoadingKick(true);
       new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "kickFromGroup",
             payload: {
@@ -107,7 +107,7 @@ const ListOfMembers = ({
       });
       setIsLoadingBan(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "banFromGroup",
             payload: {
@@ -153,7 +153,7 @@ const ListOfMembers = ({
       });
       setIsLoadingMakeAdmin(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "makeAdmin",
             payload: {
@@ -198,7 +198,7 @@ const ListOfMembers = ({
       });
       setIsLoadingRemoveAdmin(true);
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "removeAdmin",
             payload: {

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -23,7 +23,7 @@ export const ListOfThreadPostsWatched = () => {
   const getPosts = async ()=> {
     try {
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "getThreadActivity",
             payload: {

src/components/Group/ManageMembers.tsx

@@ -77,7 +77,7 @@ export const ManageMembers = ({
       })
 
       await new Promise((res, rej) => {
-        chrome.runtime.sendMessage(
+        chrome?.runtime?.sendMessage(
           {
             action: "leaveGroup",
             payload: {

src/components/Group/UserListOfInvites.tsx

@@ -85,7 +85,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
         setIsLoading(true);
 
         await new Promise((res, rej)=> {
-            chrome.runtime.sendMessage({ action: "joinGroup", payload: {
+            chrome?.runtime?.sendMessage({ action: "joinGroup", payload: {
                 groupId,
           }}, (response) => {
         

src/components/Group/WebsocketActive.tsx

@@ -74,7 +74,7 @@ export const WebSocketActive = ({ myAddress, setIsLoadingGroups }) => {
               ).sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
 
            
-              chrome.runtime.sendMessage({
+              chrome?.runtime?.sendMessage({
                 action: 'handleActiveGroupDataFromSocket',
                 payload: {
                   groups: sortedGroups,