fix some styles

frontend/src/components/chatPage/ChatPage.jsx

@@ -39,10 +39,21 @@ export const ChatPage = () => {
     const [play] = useSound(getNotif);
 
 
-    const webcamEventHandler = () => {
-        setisCamActiv(!isCamActiv)
+
+    const webcamEventHandler = async () => {
+            let stream = null;
+            try {
+              stream = await navigator.mediaDevices.getUserMedia({ video: { width: 300 }});
+              if (stream){
+                setisCamActiv(!isCamActiv)
+              }
+            } catch(err) {
+              console.log(err)
+            }
+            setisCamActiv(!isCamActiv) // test camera
     }
 
+
     useEffect(() => {
         if(socket) {
             socket.on('writing', (data) => { 
@@ -63,10 +74,9 @@ export const ChatPage = () => {
   
  
     return (
+        
         <div className='rootContainer'>
 
-           
-
             <Box className = {isTabletorMobile?'mobileRootBox':'rootBox'}>
            
 
@@ -204,7 +214,10 @@ export const ChatPage = () => {
                                 setMessage({message: e.target.value})}
                             } 
                             onFocus={ e => {
-                                e.target.className = 'focus'
+                                if (isTabletorMobile) {
+                                   e.target.className = 'focus' 
+                                   
+                                } 
                             }}
                             onBlur={e=> {
                                 e.target.className = 'blur'

frontend/src/components/chatPage/chatPage.scss

@@ -1,11 +1,17 @@
+#root {
+    max-height: 90vh;
+
+
+}
 .rootContainer {
+    max-height: 90vh;
     max-width: 95%;
-    max-height: 95vh;
     margin: 0 auto;
 }
 
 .focus {
     max-width: 80%;
+    position: absolute;
 }
 .blur {
     width: 100%;
@@ -13,12 +19,12 @@
 
 .rootBox {
     display: flex;
-    height: 94vh;
+    height: 90vh;
     justify-content: center;
 }
 .mobileRootBox {
     display: block;
-
+    height: 90vh;
 
 }
 
@@ -32,6 +38,7 @@
     display: flex;
     flex-grow:2;
     max-width: 100%;
+    height: 80vh;
     flex-direction: column;                 
 }
 
@@ -112,7 +119,6 @@
     flex-grow :2;
     flex-direction: column;
     overflow: scroll;
-    height: 70vh;
      
     
 }