From 8272ac47606afba5afd45d9f4bab845f9fc00fd7 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Fri, 16 Aug 2024 10:18:13 +0100
Subject: [PATCH] Fix public dashboards are cut when printing (#46829)
* Fix public dashboards are cut when printing
* Add comment
---
.../components/EmbedFrame/EmbedFrame.styled.tsx | 11 +++++++++++
.../public/components/EmbedFrame/EmbedFrame.tsx | 6 ++++++
2 files changed, 17 insertions(+)
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
index 13cb1de23d6..ff2e92a0599 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.styled.tsx
+++ b/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 var(--mb-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`
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx
index cdbc49be45a..46d8c087376 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx
+++ b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx
@@ -12,6 +12,7 @@ import {
} from "metabase/dashboard/components/Dashboard/Dashboard.styled";
import { ExportAsPdfButton } from "metabase/dashboard/components/DashboardHeader/buttons/ExportAsPdfButton";
import { DASHBOARD_PDF_EXPORT_ROOT_ID } from "metabase/dashboard/constants";
+import { getDashboardType } from "metabase/dashboard/utils";
import { initializeIframeResizer, isSmallScreen } from "metabase/lib/dom";
import { useSelector } from "metabase/lib/redux";
import { FilterApplyButton } from "metabase/parameters/components/FilterApplyButton";
@@ -105,6 +106,10 @@ export const EmbedFrame = ({
state => !getSetting(state, "hide-embed-branding?"),
);
+ const isPublicDashboard = Boolean(
+ dashboard && getDashboardType(dashboard.id) === "public",
+ );
+
const ParametersListComponent = getParametersListComponent({
isEmbeddingSdk,
isDashboard: !!dashboard,
@@ -140,6 +145,7 @@ export const EmbedFrame = ({
<Root
hasScroll={hasFrameScroll}
isBordered={bordered}
+ hasVisibleOverflowWhenPriting={isPublicDashboard}
className={cx(EmbedFrameS.EmbedFrame, className, {
[EmbedFrameS.NoBackground]: !background,
})}
--
GitLab