Add some media queries to improve UI on mobile

res/css/views/auth/_AuthBody.scss

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 .mx_AuthBody {
-    width: 500px;
+    max-width: 500px;
     font-size: $font-12px;
     color: $authpage-secondary-color;
     background-color: $authpage-body-bg-color;
@@ -146,3 +146,9 @@ limitations under the License.
 .mx_AuthBody_spinner {
     margin: 1em 0;
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_AuthBody {
+      padding: 10px;
+  }
+}

res/css/views/auth/_AuthHeader.scss

@@ -21,3 +21,9 @@ limitations under the License.
     padding: 25px 40px;
     box-sizing: border-box;
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_AuthHeader {
+    display: none;
+  }
+}

res/css/views/auth/_AuthHeaderLogo.scss

@@ -23,3 +23,9 @@ limitations under the License.
 .mx_AuthHeaderLogo img {
     width: 100%;
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_AuthHeaderLogo {
+    display: none;
+  }
+}

res/css/views/auth/_AuthPage.scss

@@ -29,3 +29,9 @@ limitations under the License.
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
     background-color: $authpage-modal-bg-color;
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_AuthPage_modal {
+    margin-top: 0;
+  }
+}

res/css/views/rooms/_EventTile.scss

@@ -572,3 +572,14 @@ limitations under the License.
         margin-left: 1em;
     }
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_EventTile_line, .mx_EventTile_reply {
+    padding-left: 0;
+    margin-right: 0;
+  }
+  .mx_EventTile_content {
+    margin-top: 10px;
+    margin-right: 0;
+  }
+}

res/css/views/rooms/_RoomHeader.scss

@@ -267,3 +267,12 @@ limitations under the License.
 .mx_RoomHeader_pinsIndicatorUnread {
     background-color: $pinned-unread-color;
 }
+
+@media only screen and (max-width : 480px) {
+  .mx_RoomHeader_wrapper {
+    padding: 0;
+  }
+  .mx_RoomHeader {
+    overflow: hidden;
+  }
+}