Relax flexboxes in resizer on window resize

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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 {

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>} {