fix(sdk): reduce visual artifacts on PDF/PNG exports on custom sdk themes (#48645)

* debug pdf export styling

* apply sdk theme background overrides

* add overflow override

* tweak style overrides

* move WithThemeBackground outside of data-metabase-theme selector

* move EmbedFrame css rule up

* remove fallback mb-color-background

frontend/src/metabase/dashboard/components/DashboardGrid.styled.tsx

@@ -2,6 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import DashboardS from "metabase/css/dashboard.module.css";
+import { isEmbeddingSdk } from "metabase/env";
 import type { MantineTheme } from "metabase/ui";
 import { SAVING_DOM_IMAGE_CLASS } from "metabase/visualizations/lib/save-chart-image";
 
@@ -41,12 +42,22 @@ export const DashboardCardContainer = styled.div<DashboardCardProps>`
   }
 
   .${SAVING_DOM_IMAGE_CLASS} & .${DashboardS.Card} {
-    // the renderer we use for saving to image/pdf doesn't support box-shadow
-    // so we replace it with a border
+    /* the renderer we use for saving to image/pdf doesn't support box-shadow
+       so we replace it with a border */
     box-shadow: none;
     border: 1px solid var(--mb-color-border);
   }
 
+  /* the renderer for saving to image/pdf does not support text overflow
+     with line height in custom themes in the embedding sdk.
+     this is a workaround to make sure the text is not clipped vertically */
+  ${isEmbeddingSdk &&
+  css`
+    .${SAVING_DOM_IMAGE_CLASS} & .${DashboardS.Card} * {
+      overflow: visible !important;
+    }
+  `};
+
   ${props =>
     props.isAnimationDisabled
       ? css`

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css

@@ -10,8 +10,15 @@ body {
 
 .EmbedFrame {
   color: var(--mb-color-text-primary);
+}
+
+.EmbedFrame,
+/* this is to make it work when exporting to pdfs, where the EmbedFrame is not part of the exported dom */
+.WithThemeBackground {
   background-color: var(--mb-color-bg-dashboard);
+  border-color: var(--mb-color-border);
 }
+
 /* A temporary solution until we migrated all colors in visualization to use semantic colors
    e.g. `text-primary`, `text-secondary`, `text-tertiary`. */
 .EmbedFrame svg text {
@@ -60,14 +67,6 @@ body {
   --mb-color-background-disabled: var(--mb-base-color-gray-70);
   --mb-color-background-brand: var(--mb-base-color-brand-60);
 
-  .EmbedFrame,
-    /* this is to make it work when exporting to pdfs,
-  where the EmbedFrame is not part of the exported dom */
-      .WithThemeBackground {
-    background-color: var(--mb-color-bg-dashboard);
-    border-color: var(--mb-color-border);
-  }
-
   .EmbedFrameHeader,
   .EmbedFrameFooter {
     background-color: var(--mb-color-bg-dashboard);
@@ -101,6 +100,10 @@ body {
     }
   }
 
+  .WithThemeBackground {
+    background-color: transparent;
+  }
+
   .EmbedFrameHeader,
   .EmbedFrameFooter {
     background-color: transparent;