diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss index 403a4b7c9b..2798a4e03e 100644 --- a/res/css/views/messages/_EventTileBubble.pcss +++ b/res/css/views/messages/_EventTileBubble.pcss @@ -12,8 +12,6 @@ Please see LICENSE files in the repository root for full details. background-color: $dark-panel-bg-color; padding: 10px; border-radius: 8px; - /* Reserve space for external timestamps, but also cap the width */ - max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index cc532079b6..0e958744f1 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1383,3 +1383,14 @@ $left-gutter: 64px; margin-right: 0; } } + +.mx_EventTile.mx_EventTile_bubbleContainer { + .mx_EventTile_line { + display: grid; + grid-template-columns: 64px auto; + } +} + +.mx_EventTile_timestampContainer_hidden { + visibility: hidden; +} diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 2546936ab5..782c54d35b 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1175,8 +1175,11 @@ export class UnwrappedEventTile extends React.Component // Used to simplify the UI layout where necessary by not conditionally rendering an element at the start const dummyTimestamp = useIRCLayout ? : null; const timestamp = showTimestamp && ts ? messageTimestamp : dummyTimestamp; - const linkedTimestamp = - timestamp !== dummyTimestamp && !this.props.hideTimestamp ? linkedMessageTimestamp : dummyTimestamp; + const linkedTimestampContent = timestamp !== dummyTimestamp ? linkedMessageTimestamp : dummyTimestamp; + const linkedTimestampClass = classNames({ + mx_EventTile_timestampContainer_hidden: !showTimestamp, + }); + const linkedTimestamp =
{linkedTimestampContent}
; let pinnedMessageBadge: JSX.Element | undefined; if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {