Refactor responsiveness for rotated view

src/components/Chat/Chat.css

@@ -63,4 +63,16 @@
   #nickname {
     max-width: 8.4em;
   }
+}
+@media screen and (max-height: 300px) {
+  .see-message-btn,
+  .enter
+   {
+    max-width:15em;
+  }
+
+  #nickname {
+    max-width: 8.4em;
+    font-size: .9em;
+  }
 }

src/components/RoomOne/RoomOne.css

@@ -178,28 +178,74 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-height: 585px) {
+  .board {
+    width: 80%;
+  }
+  .lamp {
+    width: 110%;
+  }
+  .radio {
+    width: 70%
+  }
+  .door {
+    width: 60%;
+  }
+}
+
+@media screen and (max-height: 480px) {
   .room {
-    padding: 0rem;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-areas:
+      'clock board board board lamp'
+      'bike door door desk radio'
+      'plant door door desk radio ';
+  }
+  .board {
+    width: 70%;
   }
 
-  .alpha-centauri {
-    padding-left: 1rem;
+  .radio {
+    margin-bottom: 0rem;
   }
+  .door {
+    width: 50%;
+  }
+}
 
-  .board,
+
+@media screen and (max-width: 768px) {
+
+  .room {
+    padding: 0rem;
+  }
+
   .clock,
-  .radio,
   .plant,
   .bike {
     width: 90%;
   }
 
-  .deskComp {
+  .desk-comp {
     width: 50%;
   }
+
+}
+
+@media screen and (max-height: 300px) {
+  .board {
+    margin-top: .5rem;
+    width: 60%;
+  }
   .lamp {
-    width: 140%;
+    width: 85%;
+  }
+  .radio {
+    width: 60%
+  }
+  .alpha-centauri {
+    margin-bottom: 4rem;
   }
 }