Align the right edge of info tile lines with normal ones on IRC layout (#9058)

* Apply inline start margin to info event tile line to align the right edge with normal event tile lines

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

* Rename the variable

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

* Add a test to check inline start margin

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

* Rerun CI

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

* Improve tests a little bit

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-25 09:05:32 +00:00 committed by GitHub
parent c5eaeafe8e
commit 92fce71e39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 9 deletions

View file

@ -274,7 +274,7 @@ $left-gutter: 64px;
}
&[data-layout="irc"] {
--EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
--EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
@ -288,7 +288,7 @@ $left-gutter: 64px;
.mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-inset-inline-start);
left: var(--EventTile_irc_line_info-margin-inline-start);
&.mx_cryptoEvent {
left: unset;
@ -308,11 +308,15 @@ $left-gutter: 64px;
&.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
left: var(--EventTile_irc_line_info-margin-inline-start);
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}
.mx_EventTile_line {
margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
}
}
}

View file

@ -161,10 +161,6 @@ $irc-line-height: $font-18px;
}
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_line {
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_ViewSourceEvent, // For hidden events
.mx_TextualEvent {
line-height: $irc-line-height;