diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 495c96ec67..2a419530d8 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -28,11 +28,10 @@ limitations under the License. margin-left: 49px; margin-right: 100px; font-size: $font-14px; - flex-direction: column; - display: flex; .mx_ThreadInfo { - max-width: 100%; + clear: both; + width: fit-content; } &.mx_EventTile_continuation { @@ -91,8 +90,6 @@ limitations under the License. } &[data-self=false] { - align-items: flex-start; - .mx_EventTile_line { border-bottom-right-radius: var(--cornerRadius); } @@ -106,23 +103,22 @@ limitations under the License. } --backgroundColor: $eventbubble-others-bg; - - .mx_ThreadInfo { - align-self: flex-start; - margin-top: 8px; - margin-left: -10px; - margin-bottom: 8px; - } } &[data-self=true] { - align-items: flex-end; .mx_EventTile_line { border-bottom-left-radius: var(--cornerRadius); + float: right; > a { left: auto; right: -68px; } } + + .mx_ThreadInfo { + float: right; + margin-right: calc(-1 * var(--gutterSize)); + } + .mx_SenderProfile { display: none; } @@ -147,13 +143,6 @@ limitations under the License. } --backgroundColor: $eventbubble-self-bg; - - .mx_ThreadInfo { - align-self: flex-end; - margin-right: -14px; - margin-top: 8px; - margin-bottom: 4px; - } } .mx_EventTile_line { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5559f81e0a..540b7d89af 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -690,8 +690,7 @@ $hover-select-border: 4px; color: $secondary-content; box-sizing: border-box; justify-content: flex-start; - margin-right: 110px; - margin-left: 64px; + clear: both; &:hover, &-active { cursor: pointer; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index b433babba7..14ec872bc9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1336,8 +1336,8 @@ export default class EventTile extends React.Component { { actionBar } { this.props.layout === Layout.IRC && (reactionsRow) } - { this.props.layout !== Layout.IRC && (reactionsRow) } { this.renderThreadInfo() } + { this.props.layout !== Layout.IRC && (reactionsRow) } { msgOption } ) );