From 213e2df9fced040e4e143dfc32259abecfb9cc33 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 12 Jul 2020 08:49:04 +0100
Subject: [PATCH] Remove redundant scroll-margins and fix RoomTile wrongly
 scrolling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_RoomTile2.scss         |  9 ---------
 src/components/views/rooms/RoomSublist2.tsx | 10 ++++++++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index d2d394e266..8297d1952c 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -21,10 +21,6 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
-    // allow scrollIntoView to ignore the sticky headers, must match combined height of .mx_RoomSublist2_headerContainer
-    scroll-margin-top: 32px;
-    scroll-margin-bottom: 32px;
-
     // The tile is also a flexbox row itself
     display: flex;
 
@@ -168,11 +164,6 @@ limitations under the License.
     }
 }
 
-// do not apply scroll-margin-bottom to the sublist which will not have a sticky header below it
-.mx_RoomSublist2:last-child .mx_RoomTile2 {
-    scroll-margin-bottom: 0;
-}
-
 // We use these both in context menus and the room tiles
 .mx_RoomTile2_iconBell::before {
     mask-image: url('$(res)/img/feather-customised/bell.svg');
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index c351384be4..5cb86d4cba 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { createRef } from "react";
+import {createRef, UIEventHandler} from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -595,6 +595,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         );
     }
 
+    private onScrollPrevent(e: React.UIEvent<HTMLDivElement>) {
+        // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
+        // this fixes https://github.com/vector-im/riot-web/issues/14413
+        (e.target as HTMLDivElement).scrollTop = 0;
+    }
+
     public render(): React.ReactElement {
         // TODO: Error boundary: https://github.com/vector-im/riot-web/issues/14185
 
@@ -704,7 +710,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         className="mx_RoomSublist2_resizeBox"
                         enable={handles}
                     >
-                        <div className="mx_RoomSublist2_tiles">
+                        <div className="mx_RoomSublist2_tiles" onScroll={this.onScrollPrevent}>
                             {visibleTiles}
                         </div>
                         {showNButton}