Update Space Panel scrollable region (#7245)

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);
+        }
     }
 }
 

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;