diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index b9a41c4310..c278f813d0 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/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;
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index 6528d6c6cd..bfe463ed49 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/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
+ }
+ }
+}
\ No newline at end of file
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index f2a616f9c9..5f88473c5f 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/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;
}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 1c10efb346..f875467e4f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/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 (
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.js
index 1abd11f838..a043b350ab 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/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(
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index 44ceeb9b7b..596d46bf36 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/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() {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index b2daa5667f..4ff3a5ccfc 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/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,