From 82c125c1701bd5d79d014c1e7023d6693973c2e0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 1 Dec 2021 10:51:54 +0000
Subject: [PATCH] Update Space Panel scrollable region (#7245)

---
 res/css/structures/_SpacePanel.scss           | 20 ++++++++++++++-----
 res/css/structures/_UserMenu.scss             |  3 ++-
 .../structures/IndicatorScrollbar.tsx         |  7 ++++---
 src/components/views/spaces/SpacePanel.tsx    |  8 ++++----
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 60aa373a39..5f5c20dfdd 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -35,11 +35,6 @@ $activeBorderColor: $primary-content;
     display: flex;
     flex-direction: column;
 
-    .mx_SpacePanel_spaceTreeWrapper {
-        flex: 1;
-        padding: 12px 8px 16px 0;
-    }
-
     .mx_SpacePanel_toggleCollapse {
         margin: 0 auto;
         position: relative;
@@ -336,6 +331,9 @@ $activeBorderColor: $primary-content;
 
     /* root space buttons are bigger and not indented */
     & > .mx_AutoHideScrollbar {
+        flex: 1;
+        padding: 0 8px 16px 0;
+
         & > .mx_SpaceButton {
             height: $topLevelHeight;
 
@@ -347,6 +345,18 @@ $activeBorderColor: $primary-content;
         & > ul {
             padding-left: 0;
         }
+
+        &.mx_IndicatorScrollbar_topOverflow {
+            mask-image: linear-gradient(180deg, transparent, black 5%);
+        }
+
+        &.mx_IndicatorScrollbar_bottomOverflow {
+            mask-image: linear-gradient(180deg, black, black 95%, transparent);
+        }
+
+        &.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
+            mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
+        }
     }
 }
 
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index b522593e10..08c719a3cf 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -19,10 +19,11 @@ limitations under the License.
     border-bottom: 1px solid $quinary-content;
     margin-left: 18px;
     margin-bottom: 4px;
+    margin-top: 12px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    width: max-content;
+    width: calc(100% - 20px);
 
     .mx_UserMenu_userAvatar {
         position: relative;
diff --git a/src/components/structures/IndicatorScrollbar.tsx b/src/components/structures/IndicatorScrollbar.tsx
index 85de659481..f687d9e067 100644
--- a/src/components/structures/IndicatorScrollbar.tsx
+++ b/src/components/structures/IndicatorScrollbar.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { ComponentProps, createRef } from "react";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 
-interface IProps {
+interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> {
     // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
     // and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
     // by the parent element.
@@ -55,6 +55,7 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
     }
 
     private collectScroller = (scroller: HTMLDivElement): void => {
+        this.props.wrappedRef?.(scroller);
         if (scroller && !this.scrollElement) {
             this.scrollElement = scroller;
             // Using the passive option to not block the main thread
@@ -185,10 +186,10 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
             ? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
 
         return (<AutoHideScrollbar
+            {...otherProps}
             ref={this.autoHideScrollbar}
             wrappedRef={this.collectScroller}
             onWheel={this.onMouseWheel}
-            {...otherProps}
         >
             { leftOverflowIndicator }
             { children }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 52fa4a1e48..d945ca395a 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -44,7 +44,6 @@ import {
     UPDATE_SELECTED_SPACE,
     UPDATE_TOP_LEVEL_SPACES,
 } from "../../../stores/spaces";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
@@ -58,6 +57,7 @@ import UIStore from "../../../stores/UIStore";
 import QuickSettingsButton from "./QuickSettingsButton";
 import { useSettingValue } from "../../../hooks/useSettings";
 import UserMenu from "../../structures/UserMenu";
+import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -252,7 +252,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
     });
 
     return <div className="mx_SpaceTreeLevel">
-        <UserMenu isPanelCollapsed={isPanelCollapsed} />
         { metaSpacesSection }
         { invites.map(s => (
             <SpaceItem
@@ -308,9 +307,10 @@ const SpacePanel = () => {
                         aria-label={_t("Spaces")}
                         ref={ref}
                     >
+                        <UserMenu isPanelCollapsed={isPanelCollapsed} />
                         <Droppable droppableId="top-level-spaces">
                             { (provided, snapshot) => (
-                                <AutoHideScrollbar
+                                <IndicatorScrollbar
                                     {...provided.droppableProps}
                                     wrappedRef={provided.innerRef}
                                     className="mx_SpacePanel_spaceTreeWrapper"
@@ -324,7 +324,7 @@ const SpacePanel = () => {
                                     >
                                         { provided.placeholder }
                                     </InnerSpacePanel>
-                                </AutoHideScrollbar>
+                                </IndicatorScrollbar>
                             ) }
                         </Droppable>
                         <AccessibleTooltipButton