fix(sdk): modal pushing content below when opened (#48216)

* fix(sdk): modal pushing content below when opened

* render the portal below the content so we don't need the zIndex

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>

---------

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>

enterprise/frontend/src/embedding-sdk/components/private/SdkPortalContainer.tsx

+import styled from "@emotion/styled";
+
+import { EMBEDDING_SDK_PORTAL_ROOT_ELEMENT_ID } from "embedding-sdk/config";
+
+import { PublicComponentStylesWrapper } from "./PublicComponentStylesWrapper";
+
+/**
+ * This is the portal container used by popovers modals etc, it is wrapped with PublicComponentStylesWrapper
+ * so that it has our styles applied.
+ * Mantine components needs to have the defaultProps set to use `EMBEDDING_SDK_PORTAL_CONTAINER_ELEMENT_ID` as target for the portal
+ */
+export const PortalContainer = () => (
+  <PublicComponentStylesWrapper>
+    <FixedPosition id={EMBEDDING_SDK_PORTAL_ROOT_ELEMENT_ID}></FixedPosition>
+  </PublicComponentStylesWrapper>
+);
+
+const FixedPosition = styled.div`
+  // needed otherwise it will rendered "in place" and push the content below
+  position: fixed;
+  left: 0;
+  top: 0;
+`;

enterprise/frontend/src/embedding-sdk/components/public/MetabaseProvider.tsx

@@ -4,10 +4,7 @@ import { type JSX, type ReactNode, memo, useEffect } from "react";
 import { Provider } from "react-redux";
 
 import { SdkThemeProvider } from "embedding-sdk/components/private/SdkThemeProvider";
-import {
-  EMBEDDING_SDK_PORTAL_ROOT_ELEMENT_ID,
-  EMBEDDING_SDK_ROOT_ELEMENT_ID,
-} from "embedding-sdk/config";
+import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
 import { useInitData } from "embedding-sdk/hooks";
 import type { SdkEventHandlersConfig } from "embedding-sdk/lib/events";
 import type { SdkPluginsConfig } from "embedding-sdk/lib/plugins";
@@ -25,14 +22,12 @@ import type { MetabaseTheme } from "embedding-sdk/types/theme";
 import { setOptions } from "metabase/redux/embed";
 import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
 
-import {
-  PublicComponentStylesWrapper,
-  SCOPED_CSS_RESET,
-} from "../private/PublicComponentStylesWrapper";
+import { SCOPED_CSS_RESET } from "../private/PublicComponentStylesWrapper";
 import { SdkFontsGlobalStyles } from "../private/SdkGlobalFontsStyles";
-import "metabase/css/index.module.css";
+import { PortalContainer } from "../private/SdkPortalContainer";
 import { SdkUsageProblemDisplay } from "../private/SdkUsageProblem";
 
+import "metabase/css/index.module.css";
 import "metabase/css/vendor.css";
 
 export interface MetabaseProviderProps {
@@ -92,9 +87,9 @@ export const MetabaseProviderInternal = ({
       <SdkThemeProvider theme={theme}>
         <SdkFontsGlobalStyles baseUrl={config.metabaseInstanceUrl} />
         <div className={className} id={EMBEDDING_SDK_ROOT_ELEMENT_ID}>
-          <PortalContainer />
           {children}
           <SdkUsageProblemDisplay config={config} />
+          <PortalContainer />
         </div>
       </SdkThemeProvider>
     </EmotionCacheProvider>
@@ -113,14 +108,3 @@ export const MetabaseProvider = memo(function MetabaseProvider({
     </Provider>
   );
 });
-
-/**
- * This is the portal container used by popovers modals etc, it is wrapped with PublicComponentStylesWrapper
- * so that it has our styles applied.
- * Mantine components needs to have the defaultProps set to use `EMBEDDING_SDK_PORTAL_CONTAINER_ELEMENT_ID` as target for the portal
- */
-const PortalContainer = () => (
-  <PublicComponentStylesWrapper>
-    <div id={EMBEDDING_SDK_PORTAL_ROOT_ELEMENT_ID}></div>
-  </PublicComponentStylesWrapper>
-);