Merge pull request #97 from RonLek/fix-cross-browser-widths

[FIX] Makes heights and widths cross browser compatible

Author: murtaza98

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;
 }
@@ -20,6 +23,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 {
@@ -21,8 +27,11 @@
 }
 
 .login-card {
+    width: 100%;
     max-width: 450px;
     width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
     background-color: white;
     padding: 20px;
     display:flex;
@@ -38,6 +47,10 @@
     display: flex;
     margin: 0px auto 10px;
     width: inherit;
+    max-width: 84%;
+    max-width: -webkit-fill-available;
+    max-width: -moz-available;
+    max-width: fill-available;
     padding: 0.8em 2.5em;
     color: white;
     text-decoration: none;

client/src/components/RoomInfo/index.css

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

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;