Fix room list scroll jumps (#7991)

Signed-off-by: Robin Townsend <robin@robin.town>
matrix-org · Mar 9, 2022 · 7b71a9f · 7b71a9f
1 parent 14684c6
commit 7b71a9f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git 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
@@ -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 }