Implement more nitpicks

- fix avatar inital aligment
- right align names
- set flair height to avatar's
- fix conditions for resizing to be more stable

res/css/views/rooms/_IRCLayout.scss

@@ -54,6 +54,7 @@ $irc-line-height: $font-18px;
             display: flex;
             align-items: center;
             overflow: visible;
+            justify-content: flex-end;
         }
 
         .mx_EventTile_line, .mx_EventTile_reply {
@@ -79,7 +80,7 @@ $irc-line-height: $font-18px;
                 height: $font-14px !important;
                 width: $font-14px !important;
                 font-size: $font-10px !important;
-                line-height: $font-14px !important;
+                line-height: $font-15px !important;
             }
         }
 
@@ -188,6 +189,10 @@ $irc-line-height: $font-18px;
         }
     }
 
+    .mx_SenderProfile:hover {
+        justify-content: flex-start;
+    }
+
     .mx_SenderProfile_hover:hover {
         overflow: visible;
         width: auto;
@@ -210,4 +215,10 @@ $irc-line-height: $font-18px;
         cursor: col-resize;
         z-index: 100;
     }
+
+    // Need to use important to override the js provided height and width values.
+    .mx_Flair > img {
+        height: $font-14px !important;
+        width: $font-14px !important;
+    }
 }

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -52,11 +52,11 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
 
         console.log({offset})
         // If we're trying to go smaller than min width, don't.
-        if (this.state.width <= this.props.minWidth && offset <= 0) {
+        if (newWidth < this.props.minWidth) {
             return location;
         }
 
-        if (this.state.width >= this.props.maxWidth && offset >= 0) {
+        if (newWidth > this.props.maxWidth) {
             return location;
         }