diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index d5b28d07e2e..c00ac227cf5 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -50,6 +50,10 @@ limitations under the License. height: 24px; color: $tertiary-content; + .mx_RoomSublist_stickableContainer { + width: 100%; + } + .mx_RoomSublist_stickable { flex: 1; max-width: 100%; @@ -176,6 +180,14 @@ limitations under the License. } } + // In the general case, we reserve space for each sublist header to prevent + // scroll jumps when they become sticky. However, that leaves a gap when + // scrolled to the top above the first sublist (whose header can only ever + // stick to top), so we make sure to exclude the first visible sublist. + &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer { + height: 24px; + } + .mx_RoomSublist_resizeBox { position: relative; diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index b19bed523f5..3f03d11a76c 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -698,25 +698,27 @@ export default class RoomSublist extends React.Component { onFocus={onFocus} aria-label={this.props.label} > -
- - { this.renderMenu() } - { this.props.isMinimized ? null : badgeContainer } - { this.props.isMinimized ? null : addRoomButton } +
+
+ + { this.renderMenu() } + { this.props.isMinimized ? null : badgeContainer } + { this.props.isMinimized ? null : addRoomButton } +
{ this.props.isMinimized ? badgeContainer : null } { this.props.isMinimized ? addRoomButton : null }