more responsive

public/chat.html

@@ -56,11 +56,7 @@
     <div id="entire-chat">
       <div id="chat-zone">
         <form class="compose">
-          <textarea
-            type="text"
-            placeholder="Type a message"
-            style="overflow: -moz-scrollbars-none;"
-          ></textarea>
+          <input type="text" placeholder="Type a message" />
         </form>
         <div class="chat-messages"></div>
       </div>

public/css/chat.css

@@ -141,7 +141,7 @@ a {
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  width: 70%;
+  width: 65%;
   height: auto;
 
   max-height: 100%;
@@ -153,6 +153,8 @@ a {
   background-repeat: no-repeat;
   background-position: center center;
   box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
+
+  object-fit: cover;
 }
 
 /*Neomorphic buttons*/
@@ -220,13 +222,13 @@ button:hover {
   position: absolute;
   height: 100%;
   right: 0;
-  width: 15vw;
+  width: 17.5vw;
   padding: 0;
 }
 
 .compose {
-  width: calc(13vw - 40px);
-  height: 100px;
+  width: calc(17.5vw - 40px);
+  height: 60px;
   font-family: "Heebo", sans-serif;
   position: fixed;
   bottom: 0;
@@ -236,7 +238,7 @@ button:hover {
   box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
   margin: 20px;
   box-sizing: border-box;
-  padding: 12px;
+  padding: 16px;
   background: #1c1d22;
   overflow-x: hidden;
   overflow: -moz-scrollbars-none;
@@ -244,7 +246,7 @@ button:hover {
   scrollbar-width: none;
 }
 
-.compose textarea {
+.compose input {
   font-family: inherit;
   font-size: inherit;
   border: none;
@@ -256,17 +258,7 @@ button:hover {
   color: white;
 }
 
-textarea {
-  overflow: scroll;
-  overflow: -moz-scrollbars-none;
-  -ms-overflow-style: none;
-}
-
-textarea::-webkit-scrollbar {
-  width: 0 !important;
-}
-
-.compose textarea::placeholder {
+.compose input::placeholder {
   color: white;
 }
 
@@ -276,7 +268,7 @@ textarea::-webkit-scrollbar {
   position: absolute;
   height: 100%;
   right: 0;
-  width: 15vw;
+  width: 17.5vw;
   overflow: scroll;
   font-family: "Heebo", sans-serif;
   font-size: 0.8rem;
@@ -301,7 +293,7 @@ textarea::-webkit-scrollbar {
 
 .chat-messages {
   overflow-x: hidden;
-  padding-bottom: 100px;
+  padding-bottom: 80px;
   overflow: -moz-scrollbars-none;
 }
 

public/js/chat.js

@@ -14,7 +14,7 @@ const isWebRTCSupported =
   window.RTCPeerConnection;
 
 // Element vars
-const chatInput = document.querySelector(".compose textarea");
+const chatInput = document.querySelector(".compose input");
 const pipVideo = document.getElementById("remote-video");
 
 var VideoChat = {