diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 4dd91eb7f2..4b48ec971b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -681,6 +681,30 @@ $hover-select-border: 4px; display: flex; flex-direction: column; + .mx_ScrollPanel { + margin-top: 20px; + .mx_RoomView_MessageList { + padding: 0; + } + } + + .mx_EventTile_senderDetails { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 6px; + a { + flex: 1; + min-width: none; + max-width: 100%; + display: flex; + align-items: center; + .mx_SenderProfile { + flex: 1; + } + } + } + .mx_ThreadView_List { flex: 1; overflow: scroll; @@ -698,7 +722,6 @@ $hover-select-border: 4px; width: 100%; display: flex; flex-direction: column; - border-bottom: 1px solid #888; margin-top: 0; padding-bottom: 5px; margin-bottom: 5px; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 5e2eff4047..b2747f7a9b 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -340,3 +340,17 @@ limitations under the License. height: 50px; } } + +/** + * Unstable compact mode + */ + +.mx_MessageComposer.mx_MessageComposer--compact { + margin-right: 0; + .mx_MessageComposer_wrapper { + padding: 0; + } + .mx_MessageComposer_button:last-child { + margin-right: 0; + } +} diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 7767e5929e..5d07b7feaa 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -115,6 +115,7 @@ class ThreadView extends React.Component { replyToEvent={thread?.replyToEvent} showReplyPreview={false} permalinkCreator={this.props.permalinkCreator} + compact={true} /> ); diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index bd53c9566a..fbf3b58570 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -185,6 +185,7 @@ interface IProps { replyToEvent?: MatrixEvent; showReplyPreview?: boolean; e2eStatus?: E2EStatus; + compact?: boolean; } interface IState { @@ -204,6 +205,7 @@ export default class MessageComposer extends React.Component { static defaultProps = { showReplyPreview: true, + compact: false, }; constructor(props) { @@ -367,7 +369,7 @@ export default class MessageComposer extends React.Component { render() { const controls = [ - this.state.me ? : null, + this.state.me && !this.props.compact ? : null, this.props.e2eStatus ? : null, @@ -455,8 +457,14 @@ export default class MessageComposer extends React.Component { />; } + const classes = classNames({ + "mx_MessageComposer": true, + "mx_GroupLayout": true, + "mx_MessageComposer--compact": this.props.compact, + }); + return ( -
+
{ recordingTooltip }
{ this.props.showReplyPreview && (