Manual backport — Fix public dashboards are cut when printing (#46921)

* Fix public dashboards are cut when printing

* Add comment

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx

@@ -13,6 +13,7 @@ import {
 
 export const Root = styled.div<{
   hasScroll: boolean;
+  hasVisibleOverflowWhenPriting?: boolean;
   isBordered?: boolean;
 }>`
   display: flex;
@@ -36,6 +37,16 @@ export const Root = styled.div<{
       border-radius: 8px;
       box-shadow: 0 2px 2px ${color("shadow")};
     `}
+
+  ${props =>
+    // Prevents https://github.com/metabase/metabase/issues/40660
+    // when printing an embedded dashboard
+    props.hasVisibleOverflowWhenPriting &&
+    css`
+      @media print {
+        overflow: visible;
+      }
+    `}
 `;
 
 export const ContentContainer = styled.div`

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx

@@ -13,6 +13,7 @@ import {
   FixedWidthContainer,
   ParametersFixedWidthContainer,
 } from "metabase/dashboard/components/Dashboard/Dashboard.styled";
+import { getDashboardType } from "metabase/dashboard/utils";
 import { parseHashOptions } from "metabase/lib/browser";
 import {
   initializeIframeResizer,
@@ -166,6 +167,10 @@ function EmbedFrame({
     hide_download_button,
   } = parseHashOptions(location.hash) as HashOptions;
 
+  const isPublicDashboard = Boolean(
+    dashboard && getDashboardType(dashboard.id) === "public",
+  );
+
   const hideParameters = [hide_parameters, hiddenParameterSlugs]
     .filter(Boolean)
     .join(",");
@@ -196,6 +201,7 @@ function EmbedFrame({
         className,
         EMBED_THEME_CLASSES(theme),
       )}
+      hasVisibleOverflowWhenPriting={isPublicDashboard}
       data-testid="embed-frame"
       data-embed-theme={theme}
     >