From c56975d93dcc0f625cdadce360e61bca35774937 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 16 Oct 2018 12:26:08 +0200
Subject: [PATCH] dont base collapse toggle size on min-width, as it's not
 available in collapsed state

---
 src/components/structures/LoggedInView.js |  7 +++++-
 src/resizer/distributors.js               | 27 ++++++++---------------
 src/resizer/event.js                      |  6 +++--
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 844221c952..cc15df4edc 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -98,7 +98,12 @@ const LoggedInView = React.createClass({
             vertical: "mx_ResizeHandle_vertical",
             reverse: "mx_ResizeHandle_reverse"
         };
-        makeResizeable(this.resizeContainer, classNames, CollapseDistributor);
+        const collapseToggleSize = 260 - 50;
+        makeResizeable(
+            this.resizeContainer,
+            classNames,
+            CollapseDistributor,
+            collapseToggleSize);
     },
 
     componentWillMount: function() {
diff --git a/src/resizer/distributors.js b/src/resizer/distributors.js
index eda60c6fe3..5a6e0f924a 100644
--- a/src/resizer/distributors.js
+++ b/src/resizer/distributors.js
@@ -17,29 +17,20 @@ class FixedDistributor {
 
 
 class CollapseDistributor extends FixedDistributor {
-    constructor(container, items, handleIndex, direction, sizer) {
+    constructor(container, items, handleIndex, direction, sizer, toggleSize) {
         super(container, items, handleIndex, direction, sizer);
-        const style = getComputedStyle(this.item);
-        this.minWidth = parseInt(style.minWidth, 10);   //auto becomes NaN
+        this.toggleSize = toggleSize;
     }
 
     resize(offset) {
-        let newWidth = offset - this.sizer.getItemOffset(this.item);
-        if (this.minWidth > 0) {
-            // -50 this is to not collapse immediately
-            // when moving the cursor past the minWidth
-            // to give some visual feedback you are about
-            // to collapse
-            // TODO: should 50 be configurable? minWidth/2 maybe?
-            if (offset < (this.minWidth - 50)) {
-                this.item.classList.add("collapsed");
-                newWidth = this.minWidth;
-            }
-            else {
-                this.item.classList.remove("collapsed");
-            }
+        let newSize = offset - this.sizer.getItemOffset(this.item);
+        if (newSize < this.toggleSize) {
+            this.item.classList.add("collapsed");
         }
-        super.resize(newWidth);
+        else {
+            this.item.classList.remove("collapsed");
+        }
+        super.resize(newSize);
     }
 }
 
diff --git a/src/resizer/event.js b/src/resizer/event.js
index 3baa67e097..7619a3e91d 100644
--- a/src/resizer/event.js
+++ b/src/resizer/event.js
@@ -12,7 +12,7 @@ classNames:
     resizing: string
 */
 
-function makeResizeable(container, classNames, distributorCtor, sizerCtor = Sizer) {
+function makeResizeable(container, classNames, distributorCtor, distributorCfg = undefined, sizerCtor = Sizer) {
 
     function isResizeHandle(el) {
         return el && el.classList.contains(classNames.handle);
@@ -44,7 +44,9 @@ function makeResizeable(container, classNames, distributorCtor, sizerCtor = Size
         });
         const prevItem = resizeHandle.previousElementSibling;
         const handleIndex = items.indexOf(prevItem) + 1;
-        const distributor = new distributorCtor(container, items, handleIndex, direction, sizer);
+        const distributor = new distributorCtor(
+            container, items, handleIndex,
+            direction, sizer, distributorCfg);
 
         const onMouseMove = (event) => {
             const offset = sizer.offsetFromEvent(event);