diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 1a02c0d5ac..c180a8a02d 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -45,9 +45,14 @@ limitations under the License.
/* Overrides for the attachment body tiles */
-.mx_FilePanel .mx_EventTile {
+.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
word-break: break-word;
- margin-top: 32px;
+ margin-top: 10px;
+ padding-top: 0;
+
+ .mx_EventTile_line {
+ padding-left: 0;
+ }
}
.mx_FilePanel .mx_EventTile .mx_MImageBody {
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index e54feca175..d271cd2bcc 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -84,7 +84,7 @@ limitations under the License.
display: inline;
}
-.mx_NotificationPanel .mx_EventTile_senderDetails {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
padding-left: 36px; // align with the room name
position: relative;
@@ -105,7 +105,7 @@ limitations under the License.
padding-left: 5px;
}
-.mx_NotificationPanel .mx_EventTile_line {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
margin-right: 0px;
padding-left: 36px; // align with the room name
padding-top: 0px;
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 48b565be7f..e4832d9430 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -234,6 +234,9 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView_landing {
+ display: flex;
+ flex-direction: column;
+
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
@@ -340,6 +343,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SearchBox {
margin: 0 0 20px;
+ flex: 0;
}
.mx_SpaceFeedbackPrompt {
@@ -350,6 +354,11 @@ $SpaceRoomViewInnerWidth: 428px;
display: none;
}
}
+
+ .mx_SpaceRoomDirectory_list {
+ // we don't want this container to get forced into the flexbox layout
+ display: contents;
+ }
}
.mx_SpaceRoomView_privateScope {
diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
index 65e4493f19..cbddd97e18 100644
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@@ -27,7 +27,6 @@ limitations under the License.
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
user-select: none;
- line-height: 1;
}
.mx_BaseAvatar_initial {
diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 95d7ce74c4..e018f60172 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -36,6 +36,10 @@ limitations under the License.
flex-shrink: 0;
overflow-y: auto;
+ .mx_EventTile[data-layout=bubble] {
+ margin-top: 20px;
+ }
+
div {
pointer-events: none;
}
diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss
index bc77407041..032cb49359 100644
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@@ -19,7 +19,7 @@ limitations under the License.
margin-left: 0;
margin-right: 0;
margin-bottom: 8px;
- padding-left: 10px;
+ padding: 0 10px;
border-left: 2px solid $button-bg-color;
border-radius: 2px;
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index f5d8131e6e..a748435cd8 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -16,10 +16,6 @@ limitations under the License.
$timelineImageBorderRadius: 4px;
-.mx_MImageBody {
- display: block;
-}
-
.mx_MImageBody_thumbnail {
object-fit: contain;
border-radius: $timelineImageBorderRadius;
@@ -28,7 +24,7 @@ $timelineImageBorderRadius: 4px;
justify-content: center;
align-items: center;
- > canvas {
+ > div > canvas {
border-radius: $timelineImageBorderRadius;
}
}
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 6bc75e650e..7e127e0dd5 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -38,7 +38,8 @@ limitations under the License.
padding-top: 0;
}
- &:hover {
+ &:hover,
+ &.mx_EventTile_selected {
&::before {
content: '';
position: absolute;
@@ -97,6 +98,11 @@ limitations under the License.
.mx_SenderProfile {
display: none;
}
+
+ .mx_ReplyTile .mx_SenderProfile {
+ display: block;
+ }
+
.mx_ReactionsRow {
float: right;
clear: right;
@@ -150,12 +156,24 @@ limitations under the License.
position: absolute;
top: 0;
line-height: 1;
+ z-index: 9;
img {
box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
border-radius: 50%;
}
}
+ &.mx_EventTile_noSender {
+ .mx_EventTile_avatar {
+ top: -19px;
+ }
+ }
+
+ .mx_BaseAvatar,
+ .mx_EventTile_avatar {
+ line-height: 1;
+ }
+
&[data-has-reply=true] {
> .mx_EventTile_line {
flex-direction: column;
@@ -215,6 +233,7 @@ limitations under the License.
display: flex;
align-items: center;
justify-content: center;
+ padding: 5px 0;
.mx_EventTile_avatar {
position: static;
@@ -281,7 +300,7 @@ limitations under the License.
& + .mx_EventListSummary {
.mx_EventTile {
margin-top: 0;
- padding: 0;
+ padding: 2px 0;
}
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2f06d47877..bda4a15f45 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -132,7 +132,8 @@ $hover-select-border: 4px;
}
}
- &.mx_EventTile_info .mx_EventTile_line {
+ &.mx_EventTile_info .mx_EventTile_line,
+ & ~ .mx_EventListSummary .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index ddee81a914..ebb7f99e45 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -26,6 +26,7 @@ $left-gutter: 64px;
> .mx_EventTile_avatar {
position: absolute;
+ z-index: 9;
}
.mx_MessageTimestamp {
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 97190807ca..578c0325d2 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -116,6 +116,11 @@ $irc-line-height: $font-18px;
.mx_EditMessageComposer_buttons {
position: relative;
}
+
+ .mx_ReactionsRow {
+ padding-left: 0;
+ padding-right: 0;
+ }
}
.mx_EventTile_emote {
diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss
index b3eff7e960..24900ee14b 100644
--- a/res/css/views/rooms/_LinkPreviewWidget.scss
+++ b/res/css/views/rooms/_LinkPreviewWidget.scss
@@ -34,7 +34,7 @@ limitations under the License.
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
flex: 1 1 auto;
- overflow-x: hidden; // cause it to wrap rather than clip
+ overflow: hidden; // cause it to wrap rather than clip
}
.mx_LinkPreviewWidget_title {
diff --git a/src/Registration.js b/src/Registration.js
index 70dcd38454..c59d244149 100644
--- a/src/Registration.js
+++ b/src/Registration.js
@@ -51,10 +51,15 @@ export async function startAnyRegistrationFlow(options) {
description: _t("Use your account or create a new one to continue."),
button: _t("Create Account"),
extraButtons: [
- ,
+ ,
],
onFinished: (proceed) => {
if (proceed) {
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
index 412194ab43..2cef1c0e41 100644
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
@@ -269,7 +269,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
{ _t("Advanced") }
-
{ this._recoveryKey.encodedPrivateKey }