Use ResizeObserver ponyfill for ExplicitSize HOC to ensure it updates the size...

Use ResizeObserver ponyfill for ExplicitSize HOC to ensure it updates the size in all cases, not just window resizes

frontend/src/metabase/components/ExplicitSize.jsx

 import React, { Component, PropTypes } from "react";
 import ReactDOM from "react-dom";
 
+import ResizeObserver from "resize-observer-polyfill";
+
 export default ComposedComponent => class extends Component {
     static displayName = "ExplicitSize["+(ComposedComponent.displayName || ComposedComponent.name)+"]";
 
@@ -12,18 +14,23 @@ export default ComposedComponent => class extends Component {
         };
     }
 
-    componentWillMount() {
-        window.addEventListener("resize", this._updateSize);
+    componentDidMount() {
+        // media query listener, ensure re-layout when printing
         this._mql = window.matchMedia("print");
         this._mql.addListener(this._updateSize);
-    }
 
-    componentWillUnmount() {
-        window.removeEventListener("resize", this._updateSize);
-        this._mql.removeListener(this._updateSize);
-    }
+        // resize observer, ensure re-layout when container element changes size
+        this._ro = new ResizeObserver((entries, observer) => {
+            const element = ReactDOM.findDOMNode(this);
+            for (const entry of entries) {
+                if (entry.target === element) {
+                    this._updateSize();
+                    break;
+                }
+            }
+        });
+        this._ro.observe(ReactDOM.findDOMNode(this));
 
-    componentDidMount() {
         this._updateSize();
     }
 
@@ -31,6 +38,11 @@ export default ComposedComponent => class extends Component {
         this._updateSize();
     }
 
+    componentWillUnmount() {
+        this._ro.disconnect();
+        this._mql.removeListener(this._updateSize);
+    }
+
     _updateSize = () => {
         const { width, height } = ReactDOM.findDOMNode(this).getBoundingClientRect();
         if (this.state.width !== width || this.state.height !== height) {

package.json

@@ -58,6 +58,7 @@
     "redux-router": "^2.1.2",
     "redux-thunk": "^2.0.1",
     "reselect": "^2.0.1",
+    "resize-observer-polyfill": "^1.3.2",
     "screenfull": "^3.0.0",
     "stack-source-map": "^1.0.4",
     "tether": "^1.2.0",

yarn.lock

@@ -6038,6 +6038,10 @@ reselect@^2.0.1:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-2.5.4.tgz#b7d23fdf00b83fa7ad0279546f8dbbbd765c7047"
 
+resize-observer-polyfill@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.3.2.tgz#f467efc15a86d9ee5096fd6d7f628c8a54bb805a"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"