fix messages styles and some bug

frontend/src/components/chatPage/ChatPage.jsx

@@ -38,7 +38,7 @@ export const ChatPage = () => {
     
     const isTabletorMobile = (window.screen.width < 730);
 
-    const [play] = useSound(getNotif, {volume: 0.2});
+    const [play] = useSound(getNotif, {volume: 0.005});
 
 
     const axiosConfig =   {

frontend/src/components/chatPage/chatPage.scss

@@ -1,10 +1,10 @@
-#root {
-    max-height: 90vh;
+// #root {
+//     max-height: 90vh;
 
 
-}
+// }
 .rootContainer {
-    max-height: 90vh;
+    min-height: 90vh;
     max-width: 95%;
     margin: 0 auto;
 }
@@ -59,6 +59,7 @@
 .message {
     padding: 10px;
     margin: 5px 0;
+    max-width: 80%;
     align-self: flex-start;
     border-radius: 10px;
     background-color: rgb(182, 230, 176);
@@ -78,6 +79,7 @@
 .myMessage {
     align-self: flex-end;
     position: relative;
+    max-width: 80%;
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -32,16 +32,16 @@ export const MessageForm = () => {
     const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
 
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
-    
+    const messages = startMessages.concat(newMessages)  
+
     const [play] = useSound(notifSound);
 
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
         } 
-      }, [startMessages, newMessages]);
+      }, [startMessages, messages]);
            
-    const messages = startMessages.concat(newMessages)  
 
     useEffect(()=> {
         if(newMessages.length > 0 && newMessages[newMessages.length-1].userName !== user.userName){
@@ -109,6 +109,7 @@ export const MessageForm = () => {
                            <iframe 
                                 width="280" 
                                 height="160" 
+                                style={{'maxWidth': "90%"}}
                                 src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
                                 title="YouTube video player" 
                                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
@@ -147,7 +148,7 @@ export const MessageForm = () => {
                         { 
                             (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files
                             ? 
-                                <img width={'auto'} height={350} src={ SERVER_URL + '/' + item.file} alt={'error load image'}/>
+                                <img width={'auto'} style={{'maxWidth': "90%"}} src={ SERVER_URL + '/' + item.file} alt={'error load image'}/>
                             :
                             ''
                         }

frontend/src/reducers/socketReducer.js

@@ -118,4 +118,4 @@ export const {
     addNewMessage,
     getAllUsers,
     writing
-} = actions;
+    } = actions;