From 447ea9eb2332f1d3b675d18bd8db1658d3cb8aa1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 13 Oct 2020 16:11:58 +0100
Subject: [PATCH] Relax flexboxes in resizer on window resize

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_AppsDrawer.scss |  4 ----
 src/resizer/resizer.ts               | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index bbbfc21cd1..df064cdf40 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -124,10 +124,6 @@ $MiniAppTileHeight: 200px;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-
-    & + .mx_AppTile {
-
-    }
 }
 
 .mx_AppTileFullWidth {
diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index 3ab8914fb5..f1ee187be1 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -27,6 +27,8 @@ classNames:
     resizing: string
 */
 
+import {throttle} from "lodash";
+
 import FixedDistributor from "./distributors/fixed";
 import Sizer from "./sizer";
 import ResizeItem from "./item";
@@ -76,10 +78,12 @@ export default class Resizer<C extends IConfig = IConfig> {
 
     public attach() {
         this.container.addEventListener("mousedown", this.onMouseDown, false);
+        window.addEventListener("resize", this.onResize);
     }
 
     public detach() {
         this.container.removeEventListener("mousedown", this.onMouseDown, false);
+        window.removeEventListener("resize", this.onResize);
     }
 
     /**
@@ -158,6 +162,17 @@ export default class Resizer<C extends IConfig = IConfig> {
         body.addEventListener("mousemove", onMouseMove, false);
     };
 
+    private onResize = throttle(() => {
+        const distributors = this.getResizeHandles().map(handle => {
+            const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
+            return distributor;
+        });
+
+        // relax all items if they had any overconstrained flexboxes
+        distributors.forEach(d => d.start());
+        distributors.forEach(d => d.finish());
+    }, 100, {trailing: true, leading: true});
+
     private createSizerAndDistributor(
         resizeHandle: HTMLDivElement,
     ): {sizer: Sizer, distributor: FixedDistributor<any>} {