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;
}
.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
padding-left: 36px;
padding-right: 36px;
}
.mx_EventTile:not([data-layout="bubble"]) {
.mx_EventTile_line {
padding-left: 36px;
padding-right: 36px;
}
.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
padding-left: 36px;
padding-right: 36px;
.mx_ReactionsRow {
padding: 0;
// See margin setting of ReactionsRow on _EventTile.scss
margin-left: 36px;
margin-right: 8px;
}
}
.mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {

View file

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