From f9d11e3c5ee5fd02a4d0f1c0f7ce764864577c5e Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Thu, 13 Jul 2023 11:24:52 -0400
Subject: [PATCH] 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       |  2 +-
 packages/playground/src/react/playground.tsx | 11 ++---------
 packages/playground/src/react/standalone.tsx | 11 +++++++++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/playground/src/react/index.ts b/packages/playground/src/react/index.ts
index 85f552bba7..eb9c3f6f18 100644
--- a/packages/playground/src/react/index.ts
+++ b/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";
diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx
index fd338481bd..88027592c0 100644
--- a/packages/playground/src/react/playground.tsx
+++ b/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`,
       }}
diff --git a/packages/playground/src/react/standalone.tsx b/packages/playground/src/react/standalone.tsx
index 54090bc2e5..8b9f595c33 100644
--- a/packages/playground/src/react/standalone.tsx
+++ b/packages/playground/src/react/standalone.tsx
@@ -1,3 +1,4 @@
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import { FunctionComponent } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHost } from "../browser-host.js";
@@ -5,7 +6,7 @@ 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 />;