fix(editor): scope inline css properly (#4634)

Fixes FER-7503

## Short description of the changes made
- adds scoping to inline css

## What was the motivation & context behind this PR?
- inline CSS styling was "leaking" to other parts of the app due to incorrect scoping into preview container

## How has this PR been tested?
- tested locally

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/layout.tsx

@@ -103,6 +103,7 @@ export default async function VisualEditorPreviewLayout({
                             light={colors.light}
                             dark={colors.dark}
                             inlineCss={config.css?.inline}
+                            inlineCssScopeSelector="#preview-container, [data-testid=product-dropdown-content], [data-testid=version-dropdown-content]"
                             scopeSelector="#preview-container @theme"
                             lightSelector=".light #preview-container"
                             darkSelector=".dark #preview-container"

packages/fern-docs/components/src/theming/global-styles.tsx

@@ -15,6 +15,7 @@ export function GlobalStyles({
     dark,
     fonts,
     inlineCss = [],
+    inlineCssScopeSelector,
     scopeSelector = ":root",
     lightSelector = ".light, :root",
     darkSelector = ".dark"
@@ -25,6 +26,7 @@ export function GlobalStyles({
     dark?: FernColorTheme;
     fonts: FernFonts;
     inlineCss?: string[];
+    inlineCssScopeSelector?: string;
     scopeSelector?: string;
     lightSelector?: string;
     darkSelector?: string;
@@ -269,8 +271,13 @@ export function GlobalStyles({
 
         ${fonts.additionalCss}
 
-        ${inlineCss.join("\n")}
-      `}
+        ${
+            inlineCssScopeSelector
+                ? `${inlineCssScopeSelector} {
+                ${inlineCss.join("\n")}
+            }`
+                : `${inlineCss.join("\n")}`
+        } `}
         </style>
     );
 }