Fix padding of messages in threads (#8574)

* Apply the padding setting of EventTile_line of ThreadView to TimelineCard

Set 2px padding-top and padding-bottom property to EventTile_line on IRC/modern layout of TimelineCard.

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

f

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

* Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard

The E2E icon is available only on TimelineCard.

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

* yarn run lint:style

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-13 18:04:27 +00:00 committed by GitHub
parent b331099525
commit 1fc8009109
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 19 deletions

View File

@ -15,6 +15,8 @@ limitations under the License.
*/
.mx_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px;
padding: 0 8px;
overflow: hidden;
display: flex;

View File

@ -201,12 +201,6 @@ limitations under the License.
}
}
.mx_EventTile:not([data-layout=bubble]) {
.mx_EventTile_e2eIcon {
left: 8px;
}
}
.mx_MessageComposer {
background-color: $background;
border-radius: 8px;

View File

@ -57,6 +57,12 @@ limitations under the License.
.mx_EventTile_line {
padding-inline-start: $left-gutter;
padding-inline-end: 36px;
padding-top: var(--BaseCard_EventTile_line-padding-block);
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
.mx_EventTile_e2eIcon {
inset-inline-start: 8px;
}
}
.mx_DisambiguatedProfile,
@ -109,10 +115,6 @@ limitations under the License.
> .mx_DisambiguatedProfile {
margin-left: 36px;
}
.mx_EventTile_line {
padding-bottom: 8px;
}
}
}

View File

@ -869,6 +869,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
&:not([data-layout=bubble]) {
padding-top: $spacing-16;
.mx_EventTile_line {
padding-top: var(--BaseCard_EventTile_line-padding-block);
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
}
}
}
@ -980,13 +985,4 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-right: 11px; // align with right edge of input
margin-right: 0; // align with right edge of background
}
.mx_GroupLayout {
.mx_EventTile {
.mx_EventTile_line {
padding-top: 2px;
padding-bottom: 2px;
}
}
}
}