Fix dashboard printing (#24585)

frontend/src/metabase/components/ExplicitSize.jsx

@@ -84,6 +84,11 @@ export default ({ selector, wrapped, refreshMode = "throttle" } = {}) =>
         this._refreshMode = nextMode;
       };
 
+      _updateSizeAndRefreshMode = () => {
+        this._updateRefreshMode();
+        this._updateSize();
+      };
+
       // ResizeObserver, ensure re-layout when container element changes size
       _initResizeObserver() {
         this._currentElement = this._getElement();
@@ -107,13 +112,13 @@ export default ({ selector, wrapped, refreshMode = "throttle" } = {}) =>
       _initMediaQueryListener() {
         this._printMediaQuery?.addEventListener(
           "change",
-          this._updateRefreshMode,
+          this._updateSizeAndRefreshMode,
         );
       }
       _teardownQueryMediaListener() {
         this._printMediaQuery?.removeEventListener(
           "change",
-          this._updateRefreshMode,
+          this._updateSizeAndRefreshMode,
         );
       }
 

frontend/src/metabase/css/core/base.css

@@ -9,6 +9,17 @@ html {
   width: 100%;
 }
 
+@media print and (orientation: portrait) {
+  html {
+    width: 8.5in;
+  }
+}
+@media print and (orientation: landscape) {
+  html {
+    width: 11in;
+  }
+}
+
 body {
   font-family: var(--default-font-family), sans-serif;
   font-size: var(--default-font-size);

frontend/src/metabase/css/dashboard.css

@@ -293,17 +293,6 @@
   }
 }
 
-@media print and (orientation: portrait) {
-  html {
-    width: 8.5in;
-  }
-}
-@media print and (orientation: landscape) {
-  html {
-    width: 11in;
-  }
-}
-
 @page {
   margin: 1cm;
 }