Use 100% width, height for playground instead of vh, vw (#2182)

This allows to use the playground component a a part of the page instead
of having it take the full screen

packages/playground/src/react/index.ts

@@ -1,3 +1,3 @@
-export { Playground, PlaygroundProps, StyledPlayground } from "./playground.js";
+export { Playground, PlaygroundProps } from "./playground.js";
 export { createReactPlayground, renderReactPlayground } from "./standalone.js";
 export * from "./types.js";

packages/playground/src/react/playground.tsx

@@ -1,4 +1,3 @@
-import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import debounce from "debounce";
 import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
@@ -79,12 +78,6 @@ export interface PlaygroundLinks {
   githubIssueUrl?: string;
 }
 
-export const StyledPlayground: FunctionComponent<PlaygroundProps> = (props) => (
-  <FluentProvider theme={webLightTheme}>
-    <Playground {...props} />
-  </FluentProvider>
-);
-
 export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
   const { host, onSave } = props;
   const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
@@ -207,8 +200,8 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
         gridTemplateColumns: "repeat(2, 1fr)",
         gridTemplateRows: "1fr auto",
         gridTemplateAreas: '"typespeceditor output"\n    "footer footer"',
-        width: "100vw",
-        height: "100vh",
+        width: "100%",
+        height: "100%",
         overflow: "hidden",
         fontFamily: `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`,
       }}

packages/playground/src/react/standalone.tsx

@@ -1,11 +1,12 @@
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import { FunctionComponent } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHost } from "../browser-host.js";
 import { registerMonacoDefaultWorkers } from "../monaco-worker.js";
 import { registerMonacoLanguage } from "../services.js";
 import { StateStorage, createUrlStateStorage } from "../state-storage.js";
 import { filterEmitters } from "../utils.js";
-import { PlaygroundProps, PlaygroundSaveData, StyledPlayground } from "./playground.js";
+import { Playground, PlaygroundProps, PlaygroundSaveData } from "./playground.js";
 
 export interface ReactPlaygroundConfig extends Partial<PlaygroundProps> {
   libraries: string[];
@@ -34,7 +35,13 @@ export async function createReactPlayground(config: ReactPlaygroundConfig) {
   };
 
   const App: FunctionComponent = () => {
-    return <StyledPlayground {...options} />;
+    return (
+      <FluentProvider theme={webLightTheme}>
+        <div css={{ height: "100vh" }}>
+          <Playground {...options} />
+        </div>
+      </FluentProvider>
+    );
   };
 
   return <App />;