fix mobile version styles

frontend/src/components/chatPage/chatPage.scss

@@ -10,7 +10,6 @@
 }
 
 .focus {
-    max-width: 80%;
     position: absolute;
 }
 .blur {
@@ -22,11 +21,6 @@
     height: 90vh;
     justify-content: center;
 }
-.mobileRootBox {
-    display: block;
-    height: 90vh;
-
-}
 
 .rootMessageForm {
     display: flex;
@@ -35,8 +29,9 @@
     flex-direction: column;                 
 }
 .rootMessageFormMobile {
+    margin: 0 auto;
     display: flex;
-    flex-grow:2;
+    flex-grow:1;
     max-width: 100%;
     height: 80vh;
     flex-direction: column;                 
@@ -63,8 +58,7 @@
 
 .message {
     padding: 10px;
-    margin: 2px 30px;
-    max-width: 50%;
+    margin: 5px 0;
     align-self: flex-start;
     border-radius: 10px;
     background-color: rgb(182, 230, 176);
@@ -84,7 +78,6 @@
 .myMessage {
     align-self: flex-end;
     position: relative;
-    max-width: 50%;
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }

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

@@ -136,8 +136,7 @@ export const MessageForm = () => {
                         { 
                             (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files
                             ? 
-
-                                 <img width={150} height={150} src={ SERVER_URL + item.file} alt={'error load image'}/>
+                                <img width={'auto'} height={350} src={ SERVER_URL + item.file} alt={'error load image'}/>
                             :
                             ''
                         }

frontend/src/components/chatPage/service/webCam/WebcamCapture.jsx

@@ -44,7 +44,7 @@ const WebcamCapture = () => {
           screenshotFormat="image/jpeg"
           style={{
             'maxHeight': '350px',
-            'maxWidth': '350px'
+            'maxWidth': 'auto'
         }}
         />
         <Button