diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 1625c3171a..f21fa5cd9f 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -243,10 +243,12 @@ limitations under the License. } .mx_EventTile_line { + --EventBubbleTile_line-margin-inline-end: -12px; + position: relative; display: flex; gap: 5px; - margin: 0 -12px 0 -9px; + margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f49ac7da7e..60f66339b2 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -895,7 +895,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); .mx_EventTile_line.mx_EventTile_mediaLine { - padding: 0 !important; + padding: 0; max-width: 100%; .mx_MFileBody { @@ -907,7 +907,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss align-items: flex-end; .mx_EventTile_line.mx_EventTile_mediaLine { - margin: 0 -13px 0 0; // align with normal messages + margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages } } } @@ -935,6 +935,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } + .mx_MFileBody, + .mx_MImageBody { + display: block; // Apply margin to span element + margin-inline-start: var(--ThreadView_group_spacing-start); + margin-inline-end: var(--ThreadView_group_spacing-end); + } + .mx_ReplyChain_wrapper { .mx_MLocationBody { margin-inline-start: 0; @@ -965,20 +972,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } } - - .mx_EventTile_mediaLine { - padding-inline-start: var(--ThreadView_group_spacing-start); - } - } - - .mx_EventTile_mediaLine { - padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal); - padding-right: 50px; - - .mx_MImageBody { - margin: 0; - padding: 0; - } } .mx_MessageComposer_sendMessage {