Fix ResizeHandle of the third pinned widget (#10896)

* Revert "Remove unused prop from ResizeHandle - reverse (#10771)"

This reverts commit 62569e209e.

* Add a comment

src/components/structures/LoggedInView.tsx

@@ -265,6 +265,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         resizer.setClassNames({
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle--vertical",
+            reverse: "mx_ResizeHandle_reverse",
         });
         return resizer;
     }

src/components/views/elements/ResizeHandle.tsx

@@ -19,17 +19,21 @@ import React from "react"; // eslint-disable-line no-unused-vars
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
 interface IResizeHandleProps {
     vertical?: boolean;
+    reverse?: boolean;
     id?: string;
     passRef?: React.RefObject<HTMLDivElement>;
 }
 
-const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, id, passRef }) => {
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
     const classNames = ["mx_ResizeHandle"];
     if (vertical) {
         classNames.push("mx_ResizeHandle--vertical");
     } else {
         classNames.push("mx_ResizeHandle--horizontal");
     }
+    if (reverse) {
+        classNames.push("mx_ResizeHandle_reverse"); // required for the resizer of the third pinned widget to work
+    }
     return (
         <div ref={passRef} className={classNames.join(" ")} data-id={id}>
             <div />

src/components/views/rooms/AppsDrawer.tsx

@@ -110,6 +110,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         const classNames = {
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle--vertical",
+            reverse: "mx_ResizeHandle_reverse",
         };
         const collapseConfig = {
             onResizeStart: () => {
@@ -265,7 +266,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
                     if (i < 1) return app;
                     return (
                         <React.Fragment key={app.key}>
-                            <ResizeHandle />
+                            <ResizeHandle reverse={i > apps.length / 2} />
                             {app}
                         </React.Fragment>
                     );