Merge branch 'master' of https://github.com/vector-im/riot-web into rxl881/apps

src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss

@@ -112,4 +112,3 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
-

src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LoginBox_loginButton_wrapper {
+    text-align: center;
+    width: 100%;
+}
+
+.mx_LoginBox_loginButton {
+    margin-top: -8px;
+    height: 40px;
+    border: 0px;
+    border-radius: 40px;
+    padding-left: 1em;
+    padding-right: 1em;
+
+    background-color: $accent-color;
+    color: $primary-bg-color;
+
+    cursor: pointer;
+
+    font-size: 15px;
+}

src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss

@@ -41,12 +41,6 @@ limitations under the License.
     height: 40px;
 }
 
-.mx_GuestWarningBar {
-    order: 1;
-
-    height: 40px;
-}
-
 .mx_MatrixChat_toolbarShowing {
     height: auto;
 }

src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss

@@ -175,3 +175,22 @@ limitations under the License.
     margin-top: -2px;
 }
 
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomStatusBar {
+        min-height: 40px;
+    }
+
+    .mx_RoomStatusBar_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_RoomStatusBar_callBar {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .mx_RoomStatusBar_typingBar {
+      height: 40px;
+      line-height: 40px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss

@@ -160,7 +160,8 @@ hr.mx_RoomView_myReadMarker {
     border-bottom: solid 1px $accent-color;
     margin-top: 0px;
     position: relative;
-    top: 5px;
+    top: -1px;
+    z-index: 1;
 }
 
 .mx_RoomView_statusArea {
@@ -259,4 +260,14 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_ongoingConfCallNotification a {
     color: $accent-fg-color ! important;
-}
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@@ -131,6 +131,14 @@ limitations under the License.
     position: absolute;
 }
 
+.mx_UserSettings_language {
+    width: 200px;
+}
+
+.mx_UserSettings_webRtcDevices_dropdown{
+    width: 200px;
+}
+
 .mx_UserSettings_profileTable
 {
     display: table;
@@ -176,6 +184,15 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_UserSettings_phoneSection {
+    display:table;
+}
+
+.mx_UserSettings_phoneCountry {
+    width: 70px;
+    display: table-cell;
+}
+
 input.mx_UserSettings_phoneNumberField {
     margin-left: 3px;
     width: 172px;
@@ -210,6 +227,17 @@ input.mx_UserSettings_phoneNumberField {
     margin-top: 10px;
 }
 
+.mx_UserSettings_avatarPicker_edit img {
+    cursor: pointer;
+}
+
 .mx_UserSettings_avatarPicker_edit > input {
     display: none;
 }
+
+.mx_UserSettings_advanced_spoiler,
+.mx_UserSettings_link {
+    cursor: pointer;
+    color: $accent-color;
+    word-break: break-all;
+}

src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@@ -42,7 +42,8 @@ limitations under the License.
 
 .mx_Login_logo {
     text-align: center;
-    height: 195px;
+    height: 150px;
+    margin-bottom: 45px;
 }
 
 .mx_Login_logo img {
@@ -66,10 +67,6 @@ limitations under the License.
     margin-bottom: 14px;
 }
 
-.mx_Login_username {
-    margin-bottom: 0px;
-}
-
 .mx_Login_fieldLabel {
     margin-top: -10px;
     margin-left: 8px;
@@ -167,16 +164,104 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
-.mx_Login_phoneSection {
-    display: table;
+.mx_Login_type_container {
+    display: flex;
+    margin-bottom: 14px;
 }
 
-.mx_Login_phoneCountry {
-    display: table-cell;
-    width: 70px;
+.mx_Login_type_label {
+    flex-grow: 1;
+    line-height: 35px;
+}
+
+.mx_Login_type_dropdown {
+    display: inline-block;
+    min-width: 170px;
+    align-self: flex-end;
+    flex: 1 1 auto;
+}
+
+.mx_Login_field_group {
+    display: flex;
+}
+
+.mx_Login_field_prefix {
+    height: 34px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-right: 0px;
+    border-radius: 3px 0px 0px 3px;
+
+    text-align: center;
+}
+
+.mx_Login_field_suffix {
+    height: 34px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-left: 0px;
+    border-radius: 0px 3px 3px 0px;
+
+    text-align: center;
+    flex-grow: 1;
+}
+
+.mx_Login_username {
+    height: 16px;
+    flex-shrink: 1;
+    min-width: 0px;
+    border-radius: 3px;
 }
 
 .mx_Login_phoneNumberField {
-    width: 210px;
-    margin-left: 3px;
+    height: 16px;
+}
+
+.mx_Login_field_has_prefix {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+.mx_Login_field_has_suffix {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.mx_Login_phoneSection {
+    display:flex;
+}
+
+.mx_Login_phoneCountry {
+    margin-bottom: 14px;
+    width: 150px;
+
+    /* To override mx_Login_field_prefix */
+    text-align: left;
+    padding: 0px;
+    background-color: $primary-bg-color;
+}
+
+.mx_Login_field_prefix .mx_Dropdown_input {
+    /* To use prefix border instead of dropdown border */
+    border: 0;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option {
+    /*
+        To match height of mx_Login_field
+        33px + 2px border from mx_Dropdown_option = 35px
+    */
+    height: 33px;
+    line-height: 33px;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option img {
+    margin: 3px;
+    vertical-align: top;
 }

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss

@@ -20,8 +20,22 @@ limitations under the License.
 
 .mx_ChatCreateOrReuseDialog .mx_Dialog_content {
     margin-bottom: 24px;
+
+    /*
+       To stop spinner that mx_ChatCreateOrReuseDialog_profile replaces from causing a
+       height change
+    */
+    min-height: 100px;
 }
 
 .mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
     display: none;
 }
+
+.mx_ChatCreateOrReuseDialog_profile {
+    display: flex;
+}
+
+.mx_ChatCreateOrReuseDialog_profile_name {
+    padding: 14px;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss

@@ -34,6 +34,10 @@ limitations under the License.
     word-wrap: nowrap;
 }
 
+.mx_ChatInviteDialog .mx_Dialog_content {
+    min-height: 50px
+}
+
 .mx_ChatInviteDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
@@ -64,8 +68,3 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_ChatInviteDialog_addressSelectHeader {
-    font-weight: bold;
-    line-height: 150%;
-    text-indent: 4px;
-}

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss

@@ -37,6 +37,7 @@ limitations under the License.
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 14px;
     color: $primary-fg-color;
+    background-color: $primary-bg-color;
 
     border-radius: 3px;
     border: solid 1px $input-border-color;

src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetMxIdDialog.scss

@@ -0,0 +1,50 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SetMxIdDialog .mx_Dialog_title {
+    padding-right: 40px;
+}
+
+.mx_SetMxIdDialog_input_group {
+    display: flex;
+}
+
+.mx_SetMxIdDialog_input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+    width: 100%;
+    max-width: 280px;
+}
+
+.mx_SetMxIdDialog_input.error,
+.mx_SetMxIdDialog_input.error:focus {
+    border: 1px solid $warning-color;
+}
+
+.mx_SetMxIdDialog_input_group .mx_Spinner {
+    height: 37px;
+    padding-left: 10px;
+    justify-content: flex-start;
+}
+
+.mx_SetMxIdDialog .success {
+    color: $accent-color;
+}

src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SetDisplayNameDialog_input {
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
-    font-size: 15px;
+.mx_AccessibleButton:focus {
+    outline: 0;
+    filter: brightness($focus-brightness);
+}
+
+.mx_AccessibleButton {
+    cursor: pointer;
 }

src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss

@@ -27,6 +27,15 @@ limitations under the License.
     user-select: none;
 }
 
+.mx_Dropdown_input:focus {
+    border-color: $accent-color;
+}
+
+/* Disable dropdown highlight on focus */
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+    filter: none;
+}
+
 .mx_Dropdown_arrow {
     border-color: $primary-fg-color transparent transparent;
     border-style: solid;
@@ -39,6 +48,14 @@ limitations under the License.
     width: 0
 }
 
+.mx_Dropdown.left_aligned .mx_Dropdown_arrow {
+    left: 10px;
+}
+
+.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
+    padding-left: 25px;
+}
+
 .mx_Dropdown_option {
     height: 35px;
     line-height: 35px;
@@ -46,9 +63,15 @@ limitations under the License.
     padding-right: 8px;
 }
 
+.mx_Dropdown_option div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .mx_Dropdown_option img {
     margin: 5px;
-    width: 25px;
+    width: 27px;
     vertical-align: middle;
 }
 
@@ -74,7 +97,7 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
     border: 1px solid $accent-color;
     background-color: $primary-bg-color;
     max-height: 200px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .mx_Dropdown_menu .mx_Dropdown_option_highlight {

src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss

@@ -20,6 +20,7 @@ limitations under the License.
 
 .mx_TextualEvent.mx_MemberEventListSummary_summary {
     font-size: 14px;
+    display: inline-flex;
 }
 
 .mx_MemberEventListSummary_avatars {
@@ -47,3 +48,13 @@ limitations under the License.
     margin-left: 63px;
     line-height: 30px;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MemberEventListSummary_line {
+        line-height: 22px;
+    }
+
+    .mx_MemberEventListSummary_toggle {
+        margin-top: 2px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2107 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoleButton {
+    margin-left: 4px;
+    margin-right: 4px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.mx_RoleButton object {
+    pointer-events: none;
+}
+
+.mx_RoleButton_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -25px;
+    left: 6px;
+}

src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss

@@ -28,4 +28,9 @@ limitations under the License.
     font-size: 13px;
     font-weight: 300;
     color: $primary-fg-color;
+}
+
+.mx_ServerConfig_selector {
+    text-align: center;
+    width: 302px; // for fr i18n
 }

src/skins/vector/css/matrix-react-sdk/views/messages/_RoomAvatarEvent.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomAvatarEvent {
+    opacity: 0.5;
+    overflow-y: hidden;
+}
+
+.mx_RoomAvatarEvent_avatar {
+    display: inline;
+    position: relative;
+    top: 5px;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss

@@ -62,8 +62,10 @@ limitations under the License.
     visibility: hidden;
     white-space: nowrap;
     color: $event-timestamp-color;
-    font-size: 11px;
-    left: 8px;
+    font-size: 10px;
+    left: 0px;
+    width: 46px; /* 8 + 30 (avatar) + 8 */
+    text-align: center;
     position: absolute;
 }
 
@@ -183,8 +185,13 @@ limitations under the License.
     visibility: visible;
 }
 
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+    visibility: visible;
+}
+
 .mx_EventTile_selected .mx_MessageTimestamp {
     left: 3px;
+    width: auto;
 }
 
 .mx_EventTile_editButton {
@@ -218,8 +225,8 @@ limitations under the License.
 }
 
 .mx_EventTile_continuation .mx_EventTile_readAvatars,
-.mx_EventTile_info .mx_EventTile_readAvatars
-{
+.mx_EventTile_info .mx_EventTile_readAvatars,
+.mx_EventTile_emote .mx_EventTile_readAvatars {
     top: 7px;
 }
 
@@ -263,6 +270,10 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EventTile_12hr .mx_EventTile_e2eIcon {
+    padding-left: 5px;
+}
+
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
     padding-left: 60px;
@@ -284,6 +295,7 @@ limitations under the License.
 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
     left: 3px;
+    width: auto;
 }
 
 /*
@@ -320,6 +332,24 @@ limitations under the License.
 .mx_EventTile_content .markdown-body code {
     background-color: #f8f8f8;
 }
+.mx_EventTile_copyButton {
+    position: absolute;
+    display: inline-block;
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
+    width: 19px;
+    height: 19px;
+    background-image: url($copy-button-url);
+}
+.mx_EventTile_body pre {
+    position: relative;
+}
+.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+{
+    visibility: visible;
+}
 
 .mx_EventTile_content .markdown-body h1,
 .mx_EventTile_content .markdown-body h2,
@@ -331,6 +361,14 @@ limitations under the License.
     font-family: inherit ! important;
 }
 
+
+/* Make h1 and h2 the same size as h3. */
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2
+{
+    font-size: 1.5em;
+}
+
 .mx_EventTile_content .markdown-body a {
     color: $accent-color;
 }
@@ -340,3 +378,71 @@ limitations under the License.
 }
 
 /* end of overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        padding-top: 0px;
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: 13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+        top: 5px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 7px;
+    }
+
+    .mx_EventTile_editButton {
+        top: 3px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_info .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss

@@ -60,3 +60,10 @@ limitations under the License.
 .mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
     visibility: visible;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_LinkPreviewWidget {
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss

@@ -202,3 +202,13 @@ limitations under the License.
     padding: 4px 4px 4px 0;
     opacity: 0.8;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MessageComposer_input {
+        min-height: 50px;
+    }
+
+    .mx_MessageComposer_noperm_error {
+        height: 50px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss

@@ -31,6 +31,7 @@ limitations under the License.
     margin-left: -2px;
     order: 1;
     flex: 1;
+    overflow: hidden;
 }
 
 .mx_RoomHeader_spinner {
@@ -95,6 +96,12 @@ limitations under the License.
     float: right;
 }
 
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+    margin-left: 14px;
+    margin-right: 24px;
+    vertical-align: -4px;
+}
+
 .mx_RoomHeader_name {
     vertical-align: middle;
     width: 100%;

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2107 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -37,3 +38,25 @@ limitations under the License.
 .mx_RoomList_scrollbar .gm-scrollbar.-vertical {
     z-index: 6;
 }
+
+.mx_RoomList_emptySubListTip {
+    font-size: 13px;
+    margin-left: 18px;
+    margin-right: 18px;
+    margin-top: 8px;
+    margin-bottom: 7px;
+    padding: 5px;
+    border: 1px dashed $accent-color;
+    color: $primary-fg-color;
+    background-color: $droptarget-bg-color;
+    border-radius: 4px;
+}
+
+.mx_RoomList_emptySubListTip .mx_RoleButton {
+    vertical-align: -3px;
+}
+
+.mx_RoomList_headerButtons {
+    position: absolute;
+    right: 60px;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss

@@ -156,7 +156,7 @@ limitations under the License.
 }
 
 .mx_RoomTile:focus {
-    outline: 0;
+    filter: none ! important;
     background-color: $roomtile-focused-bg-color;
 }
 

src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss

@@ -17,20 +17,15 @@ limitations under the License.
 .mx_TopUnreadMessagesBar {
     margin: auto;  /* centre horizontally */
     max-width: 960px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     border-bottom: 1px solid $primary-hairline-color;
-
-    /* in absence of img */
-    height: 24px;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
     display: inline;
     cursor: pointer;
-
-    /* in absence of img */
-    padding-left: 65px;
+    text-decoration: underline;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp img {
@@ -49,3 +44,10 @@ limitations under the License.
     padding-top: 3px;
     cursor: pointer;
 }
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_TopUnreadMessagesBar {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+}