Align media and reactions row on thread panel (#8312)

* Align reactions row

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include .mx_EventTile_mediaLine inside .mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-04-14 21:13:46 +00:00 committed by GitHub
parent 8eaae6bdbc
commit f97572f911
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 15 deletions

View file

@ -55,14 +55,19 @@ limitations under the License.
margin-right: 0; margin-right: 0;
} }
.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line { .mx_EventTile:not([data-layout="bubble"]) {
padding-left: 36px; .mx_EventTile_line {
padding-right: 36px; padding-left: 36px;
} padding-right: 36px;
}
.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow { .mx_ReactionsRow {
padding-left: 36px; padding: 0;
padding-right: 36px;
// See margin setting of ReactionsRow on _EventTile.scss
margin-left: 36px;
margin-right: 8px;
}
} }
.mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo { .mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {

View file

@ -1006,6 +1006,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
} }
.mx_EventTile[data-layout=group] { .mx_EventTile[data-layout=group] {
$spacing-start: 48px;
width: 100%; width: 100%;
.mx_EventTile_content, .mx_EventTile_content,
@ -1013,8 +1014,9 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_RedactedBody, .mx_RedactedBody,
.mx_UnknownBody, .mx_UnknownBody,
.mx_MPollBody, .mx_MPollBody,
.mx_ReplyChain_wrapper { .mx_ReplyChain_wrapper,
margin-left: 48px; .mx_ReactionsRow {
margin-left: $spacing-start;
margin-right: 8px; margin-right: 8px;
.mx_EventTile_content, .mx_EventTile_content,
@ -1025,11 +1027,6 @@ $threadInfoLineHeight: calc(2 * $font-12px);
} }
} }
.mx_ReactionsRow {
margin-left: 36px;
margin-right: 8px;
}
.mx_MessageTimestamp { .mx_MessageTimestamp {
top: 2px !important; top: 2px !important;
width: auto; width: auto;
@ -1053,10 +1050,14 @@ $threadInfoLineHeight: calc(2 * $font-12px);
} }
} }
} }
.mx_EventTile_mediaLine {
padding-inline-start: $spacing-start;
}
} }
.mx_EventTile_mediaLine { .mx_EventTile_mediaLine {
padding-left: 36px !important; padding-left: 36px;
padding-right: 50px; padding-right: 50px;
.mx_MImageBody { .mx_MImageBody {