diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index 243506a447..a3bbd13663 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -43,8 +43,8 @@ limitations under the License. &[data-expanded=false] { display: flex; align-items: center; - justify-content: flex-start; - padding: 0 49px; // Align with left edge of bubble tiles + justify-content: space-between; + column-gap: 5px; } // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but @@ -68,15 +68,14 @@ limitations under the License. .mx_GenericEventListSummary_toggle { margin-block: 0; - margin-inline-end: 55px; &[aria-expanded=false] { order: 9; - margin-inline-start: 5px; } &[aria-expanded=true] { margin-inline-start: auto; // reduce clickable area + margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 21fcdf0075..9e87412ca5 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -28,12 +28,16 @@ limitations under the License. --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; - margin-right: 60px; + + // For both event tile and event list summary + --EventTile_bubble-margin-inline-start: 49px; + --EventTile_bubble-margin-inline-end: 60px; + + margin-inline-start: var(--EventTile_bubble-margin-inline-start); + margin-inline-end: var(--EventTile_bubble-margin-inline-end); } .mx_EventTile[data-layout=bubble] { - --EventTile_bubble-margin-inline-start: 49px; - --EventTile_bubble-margin-inline-end: 60px; --EventTile_bubble_line-margin-inline-start: -9px; --EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_gap-inline: 5px; @@ -579,6 +583,13 @@ limitations under the License. display: flex; align-items: center; justify-content: flex-start; + + .mx_EventTile_line, + .mx_EventTile_info { + min-width: 100%; + // Preserve alignment with left edge of text in bubbles + margin: 0; + } } .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], @@ -594,13 +605,6 @@ limitations under the License. margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event } - .mx_EventTile_line, - .mx_EventTile_info { - min-width: 100%; - // Preserve alignment with left edge of text in bubbles - margin: 0; - } - .mx_EventTile_e2eIcon { margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here align-self: center;