From e2c55c61f3a674cbb18bc4583b8f1c901ce47739 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 09:37:12 +0200
Subject: [PATCH 1/7] Fix difficult to grab scrollbar

Fixes https://github.com/vector-im/element-web/issues/18689
---
 res/css/structures/_LeftPanel.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 22cc4f33e9..0bf44aac74 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -32,6 +32,10 @@ $roomListCollapsedWidth: 68px;
         display: flex;
         overflow: hidden;
         position: relative;
+
+        .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+            margin: 0;
+        }
     }
 }
 

From 290ab894aa0083b24b91dbc5b378d49d80549880 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 11:15:41 +0200
Subject: [PATCH 2/7] Migrate ResizeHandle to typescript

---
 .../{ResizeHandle.js => ResizeHandle.tsx}     | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)
 rename src/components/views/elements/{ResizeHandle.js => ResizeHandle.tsx} (58%)

diff --git a/src/components/views/elements/ResizeHandle.js b/src/components/views/elements/ResizeHandle.tsx
similarity index 58%
rename from src/components/views/elements/ResizeHandle.js
rename to src/components/views/elements/ResizeHandle.tsx
index 578689b45c..66fddf52f2 100644
--- a/src/components/views/elements/ResizeHandle.js
+++ b/src/components/views/elements/ResizeHandle.tsx
@@ -1,27 +1,26 @@
 
 import React from 'react'; // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types';
 
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
-const ResizeHandle = (props) => {
+interface IResizeHandleProps {
+    vertical?: boolean;
+    reverse?: boolean;
+    id?: string;
+}
+
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id }) => {
     const classNames = ['mx_ResizeHandle'];
-    if (props.vertical) {
+    if (vertical) {
         classNames.push('mx_ResizeHandle_vertical');
     } else {
         classNames.push('mx_ResizeHandle_horizontal');
     }
-    if (props.reverse) {
+    if (reverse) {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
+        <div className={classNames.join(' ')} data-id={id}><div /></div>
     );
 };
 
-ResizeHandle.propTypes = {
-    vertical: PropTypes.bool,
-    reverse: PropTypes.bool,
-    id: PropTypes.string,
-};
-
 export default ResizeHandle;

From a5c005756e1ab77ad2df52d43b7daf546f9c7c2a Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 13:05:46 +0200
Subject: [PATCH 3/7] Fix resizer on left panel

---
 res/css/structures/_LeftPanel.scss             | 16 +++++++++-------
 src/components/structures/LoggedInView.tsx     | 13 ++++++++++---
 src/components/views/elements/ResizeHandle.tsx |  5 +++--
 src/resizer/distributors/collapse.ts           | 13 +++++--------
 src/resizer/item.ts                            | 11 ++++++++---
 src/resizer/resizer.ts                         | 17 ++++++++++++-----
 6 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 0bf44aac74..dad27f8122 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$roomListCollapsedWidth: 68px;
+:root {
+    --room-list-collapsed-width: 68px;
+}
 
 .mx_MatrixChat--with-avatar {
     .mx_LeftPanel,
@@ -32,10 +34,6 @@ $roomListCollapsedWidth: 68px;
         display: flex;
         overflow: hidden;
         position: relative;
-
-        .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-            margin: 0;
-        }
     }
 }
 
@@ -44,12 +42,12 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
-    min-width: 206px;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
     contain: content;
     position: relative;
+    flex-grow: 1;
 
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
@@ -182,6 +180,8 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_roomListWrapper {
+            // Make the y-scrollbar more responsive
+            padding-right: 2px;
             overflow: hidden;
             margin-top: 10px; // so we're not up against the search/filter
             flex: 1 0 0; // needed in Safari to properly set flex-basis
@@ -203,11 +203,12 @@ $roomListCollapsedWidth: 68px;
 
     // These styles override the defaults for the minimized (66px) layout
     &.mx_LeftPanel_minimized {
+        flex-grow: 0;
         min-width: unset;
         width: unset !important;
 
         .mx_LeftPanel_roomListContainer {
-            width: $roomListCollapsedWidth;
+            width: var(--room-list-collapsed-width);
 
             .mx_LeftPanel_userHeader {
                 flex-direction: row;
@@ -233,4 +234,5 @@ $roomListCollapsedWidth: 68px;
             }
         }
     }
+
 }
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 457000dbb8..2ba188e1ff 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -151,7 +151,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
-    protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
+    protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
+    protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
     protected compactLayoutWatcherRef: string;
     protected backgroundImageWatcherRef: string;
     protected resizer: Resizer;
@@ -176,6 +177,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         this._roomView = React.createRef();
         this._resizeContainer = React.createRef();
+        this.resizeHandler = React.createRef();
     }
 
     componentDidMount() {
@@ -280,6 +282,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             isItemCollapsed: domNode => {
                 return domNode.classList.contains("mx_LeftPanel_minimized");
             },
+            handler: this.resizeHandler.current,
         };
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({
@@ -681,16 +684,20 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 backgroundImage={this.state.backgroundImage}
                             />
                             <div
-                                ref={this._resizeContainer}
                                 className="mx_LeftPanel_wrapper--user"
+                                ref={this._resizeContainer}
+                                style={{
+                                    maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
+                                        .getPropertyValue('--room-list-collapsed-width') : undefined,
+                                }}
                             >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
                                 />
-                                <ResizeHandle id="lp-resizer" />
                             </div>
                         </div>
+                        <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
                         <div className="mx_RoomView_wrapper">
                             { pageElement }
                         </div>
diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx
index 66fddf52f2..5ca4cadb54 100644
--- a/src/components/views/elements/ResizeHandle.tsx
+++ b/src/components/views/elements/ResizeHandle.tsx
@@ -6,9 +6,10 @@ interface IResizeHandleProps {
     vertical?: boolean;
     reverse?: boolean;
     id?: string;
+    passRef?: React.RefObject<HTMLDivElement>;
 }
 
-const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id }) => {
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
     const classNames = ['mx_ResizeHandle'];
     if (vertical) {
         classNames.push('mx_ResizeHandle_vertical');
@@ -19,7 +20,7 @@ const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id }) =
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={id}><div /></div>
+        <div ref={passRef} className={classNames.join(' ')} data-id={id}><div /></div>
     );
 };
 
diff --git a/src/resizer/distributors/collapse.ts b/src/resizer/distributors/collapse.ts
index d39580667c..8f127d7815 100644
--- a/src/resizer/distributors/collapse.ts
+++ b/src/resizer/distributors/collapse.ts
@@ -40,8 +40,8 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
 }
 
 export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
-    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer) {
-        return new CollapseItem(resizeHandle, resizer, sizer);
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer, container?: HTMLElement): CollapseItem {
+        return new CollapseItem(resizeHandle, resizer, sizer, container);
     }
 
     private readonly toggleSize: number;
@@ -55,12 +55,9 @@ export default class CollapseDistributor extends FixedDistributor<ICollapseConfi
 
     public resize(newSize: number) {
         const isCollapsedSize = newSize < this.toggleSize;
-        if (isCollapsedSize && !this.isCollapsed) {
-            this.isCollapsed = true;
-            this.item.notifyCollapsed(true);
-        } else if (!isCollapsedSize && this.isCollapsed) {
-            this.item.notifyCollapsed(false);
-            this.isCollapsed = false;
+        if (isCollapsedSize !== this.isCollapsed) {
+            this.isCollapsed = isCollapsedSize;
+            this.item.notifyCollapsed(isCollapsedSize);
         }
         if (!isCollapsedSize) {
             super.resize(newSize);
diff --git a/src/resizer/item.ts b/src/resizer/item.ts
index 66a0554d3d..868cd8230f 100644
--- a/src/resizer/item.ts
+++ b/src/resizer/item.ts
@@ -26,15 +26,20 @@ export default class ResizeItem<C extends IConfig = IConfig> {
         handle: HTMLElement,
         public readonly resizer: Resizer<C>,
         public readonly sizer: Sizer,
+        public readonly container?: HTMLElement,
     ) {
         this.reverse = resizer.isReverseResizeHandle(handle);
-        this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        if (container) {
+            this.domNode = <HTMLElement>(container);
+        } else {
+            this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        }
         this.id = handle.getAttribute("data-id");
     }
 
-    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer) {
+    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer, container?: HTMLElement) {
         const Ctor = this.constructor as typeof ResizeItem;
-        return new Ctor(handle, resizer, sizer);
+        return new Ctor(handle, resizer, sizer, container);
     }
 
     private advance(forwards: boolean) {
diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index 0496615188..57f3a1e289 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -35,6 +35,7 @@ export interface IConfig {
     onResizeStart?(): void;
     onResizeStop?(): void;
     onResized?(size: number, id: string, element: HTMLElement): void;
+    handler?: HTMLDivElement;
 }
 
 export default class Resizer<C extends IConfig = IConfig> {
@@ -46,7 +47,7 @@ export default class Resizer<C extends IConfig = IConfig> {
         public container: HTMLElement,
         private readonly distributorCtor: {
             new(item: ResizeItem): FixedDistributor<C, any>;
-            createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem;
+            createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer, container: HTMLElement): ResizeItem;
             createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer;
         },
         public readonly config?: C,
@@ -68,12 +69,14 @@ export default class Resizer<C extends IConfig = IConfig> {
     }
 
     public attach() {
-        this.container.addEventListener("mousedown", this.onMouseDown, false);
+        const attachment = this?.config?.handler.parentElement ?? this.container;
+        attachment.addEventListener("mousedown", this.onMouseDown, false);
         window.addEventListener("resize", this.onResize);
     }
 
     public detach() {
-        this.container.removeEventListener("mousedown", this.onMouseDown, false);
+        const attachment = this?.config?.handler.parentElement ?? this.container;
+        attachment.removeEventListener("mousedown", this.onMouseDown, false);
         window.removeEventListener("resize", this.onResize);
     }
 
@@ -113,7 +116,8 @@ export default class Resizer<C extends IConfig = IConfig> {
         // use closest in case the resize handle contains
         // child dom nodes that can be the target
         const resizeHandle = event.target && (<HTMLDivElement>event.target).closest(`.${this.classNames.handle}`);
-        if (!resizeHandle || resizeHandle.parentElement !== this.container) {
+        const hasHandler = this?.config?.handler;
+        if (!resizeHandle || (!hasHandler && resizeHandle.parentElement !== this.container)) {
             return;
         }
         // prevent starting a drag operation
@@ -175,12 +179,15 @@ export default class Resizer<C extends IConfig = IConfig> {
         const reverse = this.isReverseResizeHandle(resizeHandle);
         const Distributor = this.distributorCtor;
         const sizer = Distributor.createSizer(this.container, vertical, reverse);
-        const item = Distributor.createItem(resizeHandle, this, sizer);
+        const item = Distributor.createItem(resizeHandle, this, sizer, this.container);
         const distributor = new Distributor(item);
         return { sizer, distributor };
     }
 
     private getResizeHandles() {
+        if (this?.config?.handler) {
+            return [this.config.handler];
+        }
         if (!this.container.children) return [];
         return Array.from(this.container.querySelectorAll(`.${this.classNames.handle}`)) as HTMLElement[];
     }

From 41d444d7d7b738e590c68ed7c212580ef4c680ae Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 13:08:31 +0200
Subject: [PATCH 4/7] Properly use item container

---
 src/resizer/resizer.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index 57f3a1e289..cadeadcc60 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -178,8 +178,9 @@ export default class Resizer<C extends IConfig = IConfig> {
         const vertical = resizeHandle.classList.contains(this.classNames.vertical);
         const reverse = this.isReverseResizeHandle(resizeHandle);
         const Distributor = this.distributorCtor;
+        const useItemContainer = this.config && this.config.handler ? this.container : undefined;
         const sizer = Distributor.createSizer(this.container, vertical, reverse);
-        const item = Distributor.createItem(resizeHandle, this, sizer, this.container);
+        const item = Distributor.createItem(resizeHandle, this, sizer, useItemContainer);
         const distributor = new Distributor(item);
         return { sizer, distributor };
     }

From ab4934ba6c32807b1d4054cf1843bce9759e0b48 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 14:23:08 +0200
Subject: [PATCH 5/7] Make eslint happy

---
 src/resizer/distributors/collapse.ts |  7 ++++++-
 src/resizer/resizer.ts               | 13 +++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/resizer/distributors/collapse.ts b/src/resizer/distributors/collapse.ts
index 8f127d7815..1cef94976d 100644
--- a/src/resizer/distributors/collapse.ts
+++ b/src/resizer/distributors/collapse.ts
@@ -40,7 +40,12 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
 }
 
 export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
-    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer, container?: HTMLElement): CollapseItem {
+    static createItem(
+        resizeHandle: HTMLDivElement,
+        resizer: Resizer<ICollapseConfig>,
+        sizer: Sizer,
+        container?: HTMLElement,
+    ): CollapseItem {
         return new CollapseItem(resizeHandle, resizer, sizer, container);
     }
 
diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index cadeadcc60..92f458e7c7 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -47,8 +47,17 @@ export default class Resizer<C extends IConfig = IConfig> {
         public container: HTMLElement,
         private readonly distributorCtor: {
             new(item: ResizeItem): FixedDistributor<C, any>;
-            createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer, container: HTMLElement): ResizeItem;
-            createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer;
+            createItem(
+                resizeHandle: HTMLDivElement,
+                resizer: Resizer,
+                sizer: Sizer,
+                container: HTMLElement
+            ): ResizeItem;
+            createSizer(
+                containerElement: HTMLElement,
+                vertical: boolean,
+                reverse: boolean
+            ): Sizer;
         },
         public readonly config?: C,
     ) {

From 0746fab09d66b0d7ebc03f1c0eff1317c9aeeacf Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 14:23:30 +0200
Subject: [PATCH 6/7] Make stylelint happy

---
 res/css/structures/_LeftPanel.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index dad27f8122..47a4c20957 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -234,5 +234,4 @@ limitations under the License.
             }
         }
     }
-
 }

From a93d5cde090ba0c144a3a33d2833b25b3f5faf9b Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 14:38:39 +0200
Subject: [PATCH 7/7] Simplify rendering to css-only

---
 res/css/structures/_LeftPanel.scss         | 10 ++++++----
 src/components/structures/LoggedInView.tsx |  5 +----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 47a4c20957..5603de18d8 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-:root {
-    --room-list-collapsed-width: 68px;
-}
+$roomListCollapsedWidth: 68px;
 
 .mx_MatrixChat--with-avatar {
     .mx_LeftPanel,
@@ -34,6 +32,10 @@ limitations under the License.
         display: flex;
         overflow: hidden;
         position: relative;
+
+        &[data-collapsed] {
+            max-width: $roomListCollapsedWidth;
+        }
     }
 }
 
@@ -208,7 +210,7 @@ limitations under the License.
         width: unset !important;
 
         .mx_LeftPanel_roomListContainer {
-            width: var(--room-list-collapsed-width);
+            width: $roomListCollapsedWidth;
 
             .mx_LeftPanel_userHeader {
                 flex-direction: row;
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 2ba188e1ff..bbe0e42a0a 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -686,10 +686,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                             <div
                                 className="mx_LeftPanel_wrapper--user"
                                 ref={this._resizeContainer}
-                                style={{
-                                    maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
-                                        .getPropertyValue('--room-list-collapsed-width') : undefined,
-                                }}
+                                data-collapsed={this.props.collapseLhs ? true : undefined}
                             >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}