diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index d5b28d07e2..c00ac227cf 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 b19bed523f..3f03d11a76 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<IProps, IState> { onFocus={onFocus} aria-label={this.props.label} > - <div className="mx_RoomSublist_stickable"> - <Button - onFocus={onFocus} - inputRef={ref} - tabIndex={tabIndex} - className="mx_RoomSublist_headerText" - role="treeitem" - aria-expanded={this.state.isExpanded} - aria-level={1} - onClick={this.onHeaderClick} - onContextMenu={this.onContextMenu} - title={this.props.isMinimized ? this.props.label : undefined} - > - <span className={collapseClasses} /> - <span>{ this.props.label }</span> - </Button> - { this.renderMenu() } - { this.props.isMinimized ? null : badgeContainer } - { this.props.isMinimized ? null : addRoomButton } + <div className="mx_RoomSublist_stickableContainer"> + <div className="mx_RoomSublist_stickable"> + <Button + onFocus={onFocus} + inputRef={ref} + tabIndex={tabIndex} + className="mx_RoomSublist_headerText" + role="treeitem" + aria-expanded={this.state.isExpanded} + aria-level={1} + onClick={this.onHeaderClick} + onContextMenu={this.onContextMenu} + title={this.props.isMinimized ? this.props.label : undefined} + > + <span className={collapseClasses} /> + <span>{ this.props.label }</span> + </Button> + { this.renderMenu() } + { this.props.isMinimized ? null : badgeContainer } + { this.props.isMinimized ? null : addRoomButton } + </div> </div> { this.props.isMinimized ? badgeContainer : null } { this.props.isMinimized ? addRoomButton : null }