Fix review problems

- removed superfluous position and classes
- fixed compact view
- fixed event list summary avatar and text overlap
- fixed a problem where the mention list refuses to load.

res/css/views/rooms/_EventTile.scss

@@ -37,7 +37,6 @@ limitations under the License.
 }
 
 .mx_EventTile_avatar {
-    position: absolute;
     top: 14px;
     left: 8px;
     cursor: pointer;
@@ -576,84 +575,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* end of overrides */
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_EventTile {
-        padding-top: 4px;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
-        padding-top: 0px;
-        font-size: $font-13px;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: $font-20px;
-        }
-        .mx_EventTile_avatar {
-            top: 4px;
-        }
-    }
-
-    .mx_EventTile .mx_SenderProfile {
-        font-size: $font-13px;
-    }
-
-    .mx_EventTile.mx_EventTile_emote {
-        // add a bit more space for emotes so that avatars don't collide
-        padding-top: 8px;
-        .mx_EventTile_avatar {
-            top: 2px;
-        }
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 1px;
-        }
-    }
-
-    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
-        padding-top: 0;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 0px;
-        }
-    }
-
-    .mx_EventTile_line, .mx_EventTile_reply {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-
-    .mx_EventTile_avatar {
-        top: 2px;
-    }
-
-    .mx_EventTile_e2eIcon {
-        top: 3px;
-    }
-
-    .mx_EventTile_readAvatars {
-        top: 27px;
-    }
-
-    .mx_EventTile_continuation .mx_EventTile_readAvatars,
-    .mx_EventTile_emote .mx_EventTile_readAvatars {
-        top: 5px;
-    }
-
-    .mx_EventTile_info .mx_EventTile_readAvatars {
-        top: 4px;
-    }
-
-    .mx_RoomView_MessageList h2 {
-        margin-top: 6px;
-    }
-
-    .mx_EventTile_content .markdown-body {
-        p, ul, ol, dl, blockquote, pre, table {
-            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-        }
-    }
-}
-
 .mx_EventTile_tileError {
     color: red;
     text-align: center;

res/css/views/rooms/_GroupLayout.scss

@@ -47,6 +47,86 @@ $left-gutter: 65px;
     }
 
     .mx_EventTile_info .mx_EventTile_line {
-        padding-left: 83px;
+        padding-left: calc($left-gutter + 18px);
+    }
+}
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+        padding-top: 0px;
+        font-size: $font-13px;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            line-height: $font-20px;
+        }
+        .mx_EventTile_avatar {
+            top: 4px;
+        }
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: $font-13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        // add a bit more space for emotes so that avatars don't collide
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line, .mx_EventTile_reply {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 3px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_EventTile_info .mx_EventTile_readAvatars {
+        top: 4px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+
+    .mx_EventTile_content .markdown-body {
+        p, ul, ol, dl, blockquote, pre, table {
+            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+        }
     }
 }

res/css/views/rooms/_IRCLayout.scss

@@ -138,7 +138,7 @@ $irc-line-height: $font-18px;
 
         .mx_EventListSummary_avatars {
             padding: 0;
-            margin: 0;
+            margin: 0 9px 0 0;
         }
     }
 
@@ -185,7 +185,7 @@ $irc-line-height: $font-18px;
 
     .mx_SenderProfile_hover:hover {
         overflow: visible;
-        width: auto;
+        width: max(auto, 100%);
         z-index: 10;
     }
 

src/components/structures/MessagePanel.js

@@ -822,7 +822,7 @@ export default class MessagePanel extends React.Component {
 
         let ircResizer = null;
         if (this.state.useIRCLayout) {
-            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room.roomId} />;
+            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room ? this.props.roomroomId : null} />;
         }
 
         return (

src/components/views/elements/ErrorBoundary.js

@@ -73,7 +73,7 @@ export default class ErrorBoundary extends React.PureComponent {
         if (this.state.error) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new";
-            return <div className="mx_ErrorBoundary mx_IRCLayout">
+            return <div className="mx_ErrorBoundary">
                 <div className="mx_ErrorBoundary_body">
                     <h1>{_t("Something went wrong!")}</h1>
                     <p>{_t(

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -77,7 +77,9 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
     }
 
     private onMoueUp(event: MouseEvent) {
-        SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        if (this.props.roomId) {
+            SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        }
     }
 
     render() {

src/components/views/rooms/EventTile.js

@@ -659,8 +659,6 @@ export default createReactClass({
         const classes = classNames({
             mx_EventTile_bubbleContainer: isBubbleMessage,
             mx_EventTile: true,
-            mx_EventTile_irc: this.props.useIRCLayout,
-            mx_EventTile_group: !this.props.useIRCLayout,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,