Add some media queries to improve UI on mobile (#3991)

res/css/views/auth/_AuthBody.scss

@@ -146,3 +146,12 @@ limitations under the License.
 .mx_AuthBody_spinner {
     margin: 1em 0;
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthBody {
+        border-radius: 4px;
+        width: auto;
+        max-width: 500px;
+        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;
+    }
+}