FIx roomsublist heights.

- also fiddles the font size numbers

res/css/structures/_TagPanel.scss

@@ -69,7 +69,7 @@ limitations under the License.
     height: 100%;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    height: $font-40px;
+    height: 40px;
     padding: 10px 0 9px 0;
 }
 

res/css/views/rooms/_RoomTile.scss

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

src/components/structures/RoomSubList.js

@@ -32,7 +32,7 @@ import RoomTile from "../views/rooms/RoomTile";
 import LazyRenderList from "../views/elements/LazyRenderList";
 import {_t} from "../../languageHandler";
 import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
-import {toRem} from "../../utils/rem";
+import {toPx} from "../../utils/units";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
@@ -420,7 +420,7 @@ export default class RoomSubList extends React.PureComponent {
 
     setHeight = (height) => {
         if (this._subList.current) {
-            this._subList.current.style.height = toRem(height);
+            this._subList.current.style.height = toPx(height);
         }
         this._updateLazyRenderHeight(height);
     };

src/components/views/avatars/BaseAvatar.js

@@ -24,7 +24,7 @@ import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {toRem} from "../../../utils/rem";
+import {toPx} from "../../../utils/units";
 
 export default createReactClass({
     displayName: 'BaseAvatar',
@@ -166,9 +166,9 @@ export default createReactClass({
             const textNode = (
                 <span className="mx_BaseAvatar_initial" aria-hidden="true"
                     style={{
-                        fontSize: toRem(width * 0.65),
-                        width: toRem(width),
-                        lineHeight: toRem(height),
+                        fontSize: toPx(width * 0.65),
+                        width: toPx(width),
+                        lineHeight: toPx(height),
                     }}
                 >
                     { initialLetter }
@@ -179,8 +179,8 @@ export default createReactClass({
                     alt="" title={title} onError={this.onError}
                     aria-hidden="true"
                     style={{
-                        width: toRem(width),
-                        height: toRem(height)
+                        width: toPx(width),
+                        height: toPx(height)
                     }} />
             );
             if (onClick != null) {
@@ -210,8 +210,8 @@ export default createReactClass({
                     onClick={onClick}
                     onError={this.onError}
                     style={{
-                        width: toRem(width),
-                        height: toRem(height),
+                        width: toPx(width),
+                        height: toPx(height),
                     }}
                     title={title} alt=""
                     inputRef={inputRef}
@@ -224,8 +224,8 @@ export default createReactClass({
                     src={imageUrl}
                     onError={this.onError}
                     style={{
-                        width: toRem(width),
-                        height: toRem(height),
+                        width: toPx(width),
+                        height: toPx(height),
                     }}
                     title={title} alt=""
                     ref={inputRef}

src/components/views/rooms/EventTile.js

@@ -34,7 +34,7 @@ import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
 import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
-import {toRem} from "../../../utils/rem";
+import {toRem} from "../../../utils/units";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',

src/components/views/rooms/ReadReceiptMarker.js

@@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler';
 import {formatDate} from '../../../DateUtils';
 import Velociraptor from "../../../Velociraptor";
 import * as sdk from "../../../index";
-import {toRem} from "../../../utils/rem";
+import {toRem} from "../../../utils/units";
 
 let bounce = false;
 try {

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js

@@ -252,7 +252,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
-                    values={[13, 14, 15, 18, 20]}
+                    values={[13, 15, 16, 18, 20]}
                     value={this.state.fontSize}
                     onSelectionChange={this._onFontSizeChanged}
                     displayFunc={value => {}}

src/utils/units.ts

@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/* Simple utils for formatting style values
+ */
+
 // converts a pixel value to rem.
-export function toRem(pixelValue) {
+export function toRem(pixelValue: number): string {
     return pixelValue / 15 + "rem";
 }
+
+export function toPx(pixelValue: number): string {
+    return pixelValue + "px";
+}