Makes heights and widths cross browser compatible

Author: RonLek

client/src/components/ActivityPane/index.css

@@ -1,5 +1,8 @@
 .activity-pane-wrapper {
+    height: 100%;
     height: -webkit-fill-available;
+    height: -moz-available;
+    height: fill-available;
 }
 
 .activity-pane-header {

client/src/components/AnonymousModeLeftSidebar/index.css

@@ -1,7 +1,10 @@
 .anonymous-left-sidebar-wrapper {
     width: 20%;
     background-color: #2f343d;
+    min-height: 100%;
     min-height: -webkit-fill-available;
+    min-height: -moz-available;
+    min-height: fill-available;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -33,7 +36,10 @@
     background-color: rgb(255 255 255 / 10%);
     padding: 10px 20px;
     color: white;
+    width: 100%;
     width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
 }
 
 .anonymous-left-sidebar-content p {

client/src/components/ChatWindow/index.css

@@ -1,5 +1,8 @@
 .chatWindow-container {
+  width: 100%;
   width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
   display: flex;
   position: relative;
 }
@@ -16,6 +19,9 @@
 }
 
 .chatWindow {
+  width: 100%;
   width: -webkit-fill-available;
+  width: -moz-available;
+  width: fill-available;
   border: none;
 }

client/src/components/Login/index.css

@@ -5,8 +5,14 @@
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
+    min-height: 100%;
     min-height: -webkit-fill-available;
+    min-height: -moz-available;
+    min-height: fill-available;
+    min-width: 100%;
     min-width: -webkit-fill-available;
+    min-width: -moz-available;
+    min-width: fill-available;
 }
 
 .login-header {
@@ -23,6 +29,8 @@
 .login-card {
     max-width: 450px;
     width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
     background-color: white;
     padding: 20px;
     display:flex;

client/src/components/RoomItem/index.css

@@ -1,6 +1,9 @@
 .room-wrapper{
     display: flex;
+    width: 100%;
     width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
     padding: 6px 1rem;
     flex-direction: row;
     color: #9ea2a8;