Fix room list scroll jumps (#7991)

Signed-off-by: Robin Townsend <robin@robin.town>

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;
 

src/components/views/rooms/RoomSublist.tsx

@@ -698,6 +698,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                             onFocus={onFocus}
                             aria-label={this.props.label}
                         >
+                            <div className="mx_RoomSublist_stickableContainer">
                                 <div className="mx_RoomSublist_stickable">
                                     <Button
                                         onFocus={onFocus}
@@ -718,6 +719,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                     { this.props.isMinimized ? null : badgeContainer }
                                     { this.props.isMinimized ? null : addRoomButton }
                                 </div>
+                            </div>
                             { this.props.isMinimized ? badgeContainer : null }
                             { this.props.isMinimized ? addRoomButton : null }
                         </div>