fix height

src/components/Chat/ChatDirect.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 
 import {  objectToBase64 } from '../../qdn/encryption/group-encryption'
 import { ChatList } from './ChatList'
@@ -46,6 +46,11 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
   const setEditorRef = (editorInstance) => {
     editorRef.current = editorInstance;
   };
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const triggerRerender = () => {
+    forceUpdate(); // Trigger re-render by updating the state
+  };
   const publicKeyOfRecipientRef = useRef(null)
    console.log({messages})
   const getPublicKeyFunc = async (address)=> {
@@ -276,6 +281,9 @@ const clearEditorContent = () => {
         editorRef.current?.chain().blur().run(); 
         setIsFocusedParent(false)
         executeEvent("sent-new-message-group", {})
+        setTimeout(() => {
+          triggerRerender();
+         }, 300);
       }, 200);
     }
   }

src/components/Chat/ChatGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { CreateCommonSecret } from './CreateCommonSecret'
 import { reusableGet } from '../../qdn/publish/pubish'
 import { uint8ArrayToObject } from '../../backgroundFunctions/encryption'
@@ -44,7 +44,11 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const groupSocketTimeoutRef = useRef(null); // Group Socket Timeout reference
   const editorRef = useRef(null);
   const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue();
- 
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const triggerRerender = () => {
+    forceUpdate(); // Trigger re-render by updating the state
+  };
   const setEditorRef = (editorInstance) => {
     editorRef.current = editorInstance;
   };
@@ -292,6 +296,9 @@ const clearEditorContent = () => {
         editorRef.current?.chain().blur().run(); 
         setIsFocusedParent(false)
         executeEvent("sent-new-message-group", {})
+        setTimeout(() => {
+          triggerRerender();
+         }, 300);
       }, 200);
     }
   }

src/components/Chat/GroupAnnouncements.tsx

@@ -143,7 +143,7 @@ export const GroupAnnouncements = ({
   const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
   const [isFocusedParent, setIsFocusedParent] = useState(false);
 
-  const { show } = React.useContext(MyContext);
+  const { show, rootHeight } = React.useContext(MyContext);
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);
   const hasInitialized = useRef(false);
@@ -488,7 +488,7 @@ export const GroupAnnouncements = ({
       <div
         style={{
           // reference to change height
-          height: isMobile ? `calc(${getRootHeight()} - 127px` : "100vh",
+          height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
           display: "flex",
           flexDirection: "column",
           width: "100%",
@@ -514,7 +514,7 @@ export const GroupAnnouncements = ({
     <div
       style={{
          // reference to change height
-        height: isMobile ? `calc(${getRootHeight()} - 127px` : "100vh",
+        height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
         display: "flex",
         flexDirection: "column",
         width: "100%",

src/components/Chat/GroupForum.tsx

@@ -1,12 +1,13 @@
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 import { GroupMail } from "../Group/Forum/GroupMail";
-import { isMobile } from "../../App";
+import { MyContext, isMobile } from "../../App";
 import { getRootHeight } from "../../utils/mobile/mobileUtils";
 
 
@@ -25,6 +26,7 @@ export const GroupForum = ({
   defaultThread, 
   setDefaultThread
 }) => {
+  const {  rootHeight } = useContext(MyContext);
   const [isMoved, setIsMoved] = useState(false);
   useEffect(() => {
     if (hide) {
@@ -38,7 +40,7 @@ export const GroupForum = ({
     <div
     style={{
       // reference to change height
-      height: isMobile ? `calc(${getRootHeight()} - 127px` : "100vh",
+      height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
       display: "flex",
       flexDirection: "column",
       width: "100%",

src/components/Group/Group.tsx

@@ -398,7 +398,7 @@ export const Group = ({
   const [openAddGroup, setOpenAddGroup] = useState(false);
   const [isInitialGroups, setIsInitialGroups] = useState(false);
   const [openManageMembers, setOpenManageMembers] = useState(false);
-  const { setMemberGroups, memberGroups } = useContext(MyContext);
+  const { setMemberGroups, memberGroups, rootHeight } = useContext(MyContext);
   const lastGroupNotification = useRef<null | number>(null);
   const [timestampEnterData, setTimestampEnterData] = useState({});
   const [chatMode, setChatMode] = useState("groups");
@@ -1552,7 +1552,7 @@ export const Group = ({
           width: isMobile ? "100%" : "380px",
           flexDirection: "column",
           alignItems: "flex-start",
-          height: isMobile ? `calc(${getRootHeight()} - 45px)` : "100%",
+          height: isMobile ? `calc(${rootHeight} - 45px)` : "100%",
           background: !isMobile && 'var(--bg-primary)',
           borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
@@ -2266,7 +2266,7 @@ export const Group = ({
                   top: "0px",
                   background: "#27282c",
                   zIndex: 5,
-                  height: isMobile && `calc(${getRootHeight()} - 45px)`,
+                  height: isMobile && `calc(${rootHeight} - 45px)`,
                 }}
               >
                 <ChatDirect
@@ -2542,7 +2542,7 @@ export const Group = ({
                   top: "0px",
                   background: "#27282c",
                   zIndex: 5,
-                  height: isMobile && `calc(${getRootHeight()} - 45px)`,
+                  height: isMobile && `calc(${rootHeight} - 45px)`,
                 }}
               >
                 <Box