fix(sdk): decrease specificity of css reset in embedding sdk (#48193)

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

+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
@@ -13,18 +14,6 @@ export const PublicComponentStylesWrapper = styled.div`
   all: initial;
   text-decoration: none;
 
-  // # Basic css reset
-  // We can't apply a global css reset as it would leak into the host app
-  // but we can't also apply our entire css reset scoped to this container,
-  // as it would be of higher specificity than some of our styles.
-  // We'll have to hand pick the css resets that we neeed
-
-  button {
-    border: 0;
-    background-color: transparent;
-  }
-  // end of RESET
-
   font-style: normal;
 
   width: 100%;
@@ -48,3 +37,19 @@ export const PublicComponentStylesWrapper = styled.div`
     display: inline;
   }
 `;
+/**
+ * We can't apply a global css reset as it would leak into the host app but we
+ * can't also apply our entire css reset scoped to this container, as it would
+ * be of higher specificity than some of our styles.
+ *
+ * The reason why this works is two things combined:
+ * - `*:where(button)` doesn't increase specificity, so the resulting specificity is (0,1,0)
+ * - this global css is loaded in the provider, before our other styles
+ * - -> our other code with specificity (0,1,0) will override this as they're loaded after
+ */
+export const SCOPED_CSS_RESET = css`
+  ${PublicComponentStylesWrapper} *:where(button) {
+    border: 0;
+    background-color: transparent;
+  }
+`;

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

+import { Global } from "@emotion/react";
 import type { Action, Store } from "@reduxjs/toolkit";
 import { type JSX, type ReactNode, memo, useEffect } from "react";
 import { Provider } from "react-redux";
@@ -24,10 +25,14 @@ import type { MetabaseTheme } from "embedding-sdk/types/theme";
 import { setOptions } from "metabase/redux/embed";
 import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
 
-import { PublicComponentStylesWrapper } from "../private/PublicComponentStylesWrapper";
+import {
+  PublicComponentStylesWrapper,
+  SCOPED_CSS_RESET,
+} from "../private/PublicComponentStylesWrapper";
 import { SdkFontsGlobalStyles } from "../private/SdkGlobalFontsStyles";
 import "metabase/css/index.module.css";
 import { SdkUsageProblemDisplay } from "../private/SdkUsageProblem";
+
 import "metabase/css/vendor.css";
 
 export interface MetabaseProviderProps {
@@ -83,6 +88,7 @@ export const MetabaseProviderInternal = ({
 
   return (
     <EmotionCacheProvider>
+      <Global styles={SCOPED_CSS_RESET} />
       <SdkThemeProvider theme={theme}>
         <SdkFontsGlobalStyles baseUrl={config.metabaseInstanceUrl} />
         <div className={className} id={EMBEDDING_SDK_ROOT_ELEMENT_ID}>