Merge pull request #4355 from JorikSchellekens/joriks/font-scaling-fixes

Fix scaling issues

res/css/views/rooms/_Autocomplete.scss

@@ -31,9 +31,10 @@
 }
 
 .mx_Autocomplete_Completion_pill {
-    border-radius: 17px;
-    height: 34px;
-    padding: 0px 5px;
+    box-sizing: border-box;
+    border-radius: 2rem;
+    height: $font-34px;
+    padding: 0.4rem;
     display: flex;
     user-select: none;
     cursor: pointer;
@@ -42,7 +43,7 @@
 }
 
 .mx_Autocomplete_Completion_pill > * {
-    margin: 0 3px;
+    margin-right: 0.3rem;
 }
 
 /* styling for common completion elements */

res/css/views/rooms/_BasicMessageComposer.scss

@@ -46,22 +46,19 @@ limitations under the License.
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
             span.mx_UserPill, span.mx_RoomPill {
-                padding-left: 21px;
                 position: relative;
 
                 // avatar psuedo element
                 &::before {
-                    position: absolute;
-                    left: 2px;
-                    top: 2px;
                     content: var(--avatar-letter);
-                    width: 16px;
-                    height: 16px;
+                    width: $font-16px;
+                    height: $font-16px;
+                    margin-right: 0.24rem;
                     background: var(--avatar-background), $avatar-bg-color;
                     color: $avatar-initial-color;
                     background-repeat: no-repeat;
-                    background-size: 16px;
-                    border-radius: 8px;
+                    background-size: $font-16px;
+                    border-radius: $font-16px;
                     text-align: center;
                     font-weight: normal;
                     line-height: $font-16px;

res/css/views/rooms/_EntityTile.scss

@@ -69,8 +69,6 @@ limitations under the License.
     padding-right: 12px;
     padding-top: 4px;
     padding-bottom: 4px;
-    width: 36px;
-    height: 36px;
     position: relative;
 }
 

res/css/views/rooms/_EventTile.scss

@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
-    top: 8px;
+    top: $font-8px;
     left: 65px;
 }
 
@@ -117,10 +117,9 @@ limitations under the License.
 .mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: 65px; /* left gutter */
-    padding-top: 4px;
-    padding-bottom: 2px;
+    padding-top: 3px;
+    padding-bottom: 3px;
     border-radius: 4px;
-    min-height: 24px;
     line-height: $font-22px;
 }
 
@@ -314,6 +313,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 .mx_EventTile_readAvatars .mx_BaseAvatar {
     position: absolute;
     display: inline-block;
+    height: $font-14px;
+    width: $font-14px;
 }
 
 .mx_EventTile_readAvatarRemainder {

res/css/views/rooms/_RoomHeader.scss

@@ -173,8 +173,6 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    width: 28px;
-    height: 28px;
     margin: 0 7px;
     position: relative;
 }

res/css/views/rooms/_RoomTile.scss

@@ -20,7 +20,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     cursor: pointer;
-    height: 34px;
+    height: $font-34px;
     margin: 0;
     padding: 0 8px 0 10px;
     position: relative;