Add media queries to Chat

src/components/ChatWindow/ChatWindow.css

@@ -1,10 +1,50 @@
 .messages-container {
   position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  width: 15rem;
-  height: 20rem;
+  bottom: 0rem;
+  right: .25rem;
+  width: 14rem;
+  max-height: 11rem;
   border: 1px solid #ccc;
+  border-radius: 5px;
   background-color: #fff;
   flex-direction: column;
+  overflow-y: auto;
+}
+
+#currentMessage {
+  width: 13.85rem;
+  resize: none;
+}
+
+.popout-chat {
+  word-wrap: break-word;
+}
+
+.messages-container::-webkit-scrollbar {
+  width: 0; 
+}
+
+@media screen and (max-width: 585px) {
+  .messages-container {
+    width: 12rem
+  }
+  #currentMessage {
+    width: 11.85rem
+  }
+}
+@media screen and (max-width: 385px) {
+  .messages-container {
+    width: 10rem
+  }
+  #currentMessage {
+    width: 9.85rem
+  }
+}
+@media screen and (max-width: 300px) {
+  .messages-container {
+    width: 8rem
+  }
+  #currentMessage {
+    width: 7.85rem
+  }
 }

src/components/ChatWindow/ChatWindow.js

@@ -4,7 +4,7 @@ export default function ChatWindow({currentMessage, setCurrentMessage, handleSub
 
     const messagesToAdd = allMessages.map((message, index) => (
       <div key={index}className='popout-chat'>
-        <p >{message}</p>
+        <p>{message}</p>
     </div> 
     ));
 

src/components/RoomOne/RoomOne.css

@@ -112,6 +112,9 @@
   display: flex;
 }
 
+.radio {
+  margin-bottom: 6rem;
+}
 .lamp-btn {
   grid-area: lamp;
   display: flex;
@@ -159,6 +162,9 @@
   .desk-comp {
     width: 55%;
   }
+  .radio {
+    width: 80%
+  }
 }
 
 @media screen and (max-width: 768px) {

src/components/VictoryPage/VictoryPage.css

@@ -23,5 +23,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2rem
+  gap: 2rem;
+  margin: 1rem
 }