From 5988bb9a681be1256c2ee509ea781e12286c70cb Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 15 May 2023 07:40:15 +0000
Subject: [PATCH] Fix ResizeHandle of the third pinned widget (#10896)

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

This reverts commit 62569e209e063ae1ce59e1851cceac975e7b816b.

* Add a comment
---
 src/components/structures/LoggedInView.tsx     | 1 +
 src/components/views/elements/ResizeHandle.tsx | 6 +++++-
 src/components/views/rooms/AppsDrawer.tsx      | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 85f73ee8e7b..3433560a176 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/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;
     }
diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx
index 15886d8a198..0927dd30d94 100644
--- a/src/components/views/elements/ResizeHandle.tsx
+++ b/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 />
diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx
index b9e2132f89f..3f28df013f0 100644
--- a/src/components/views/rooms/AppsDrawer.tsx
+++ b/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>
                     );