[Playground] Style compiler options editor

This diff adds styling to the compiler options editor. The floating input/output 
toggle button on small screens now spans the bottom of the screen, so that it 
doesn't block the compiler options. 

Height overflows when adjusting screen size are complicated by Monaco Editor and 
will be addressed in a later diff. 

Test plan: 

Start Playground and see the latest look of the compiler options editor beneath 
the output section.

compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx

@@ -1,37 +1,46 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
-import { type ForgetCompilerFlags } from "../../lib/compilerDriver";
+import clsx from "clsx";
+import type { ForgetCompilerFlags } from "../../lib/compilerDriver";
 import { useStore, useStoreDispatch } from "../StoreContext";
 
+// TODO: Allow collapsing the compiler options editor
 export default function CompilerFlagsEditor() {
   const store = useStore();
   const dispatch = useStoreDispatch();
+
   return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(2, 1fr)",
-      }}
-    >
-      {Object.keys(store.compilerFlags).map((f: string) => {
-        const flag = f as keyof ForgetCompilerFlags;
-        return (
-          <label key={flag} style={{ display: "block" }}>
-            <input
-              type="checkbox"
-              checked={store.compilerFlags[flag]}
-              onChange={(e) =>
-                dispatch({
-                  type: "setCompilerFlag",
-                  payload: { flag, value: e.target.checked },
-                })
-              }
-            />
-            {flag}
-          </label>
-        );
-      })}
+    <div className="flex flex-col gap-2 px-5 py-4 border-t border-gray-200">
+      <div>
+        <h3 className="font-medium">Compiler Options</h3>
+      </div>
+      <div className="flex flex-col">
+        {Object.keys(store.compilerFlags).map((f) => {
+          const flag = f as keyof ForgetCompilerFlags;
+          const isChecked = store.compilerFlags[flag];
+
+          return (
+            <label key={flag} className="flex gap-1.5 text-base">
+              <input
+                type="checkbox"
+                checked={isChecked}
+                onChange={(e) =>
+                  dispatch({
+                    type: "setCompilerFlag",
+                    payload: { flag, value: e.target.checked },
+                  })
+                }
+              />
+              <span
+                className={clsx("text-gray-500", { "text-black": isChecked })}
+              >
+                {flag}
+              </span>
+            </label>
+          );
+        })}
+      </div>
     </div>
   );
 }

compiler/forget/packages/playground/components/Editor/index.tsx

@@ -18,9 +18,9 @@ import {
   type Store,
 } from "../../lib/stores";
 import { useStore, useStoreDispatch } from "../StoreContext";
+import CompilerFlagsEditor from "./CompilerFlagsEditor";
 import Input from "./Input";
 import Output from "./Output";
-import CompilerFlagsEditor from "./CompilerFlagsEditor";
 
 export default function Editor() {
   const store = useStore();
@@ -89,22 +89,15 @@ export default function Editor() {
           })}
         >
           <Output store={deferredStore} updateDiagnostics={updateDiagnostics} />
-          <div
-            className={clsx("sm:block sm:min-h-[150px] border border-gray-200")}
-          >
-            <h3>Compiler Options</h3>
-            <CompilerFlagsEditor />
-          </div>
+          <CompilerFlagsEditor />
         </div>
       </div>
-      <div className="bottom-4 left-4 sm:hidden">
-        <button
-          className="px-3 py-2 font-mono text-sm rounded-lg shadow-md bg-highlight text-link"
-          onClick={() => setShowOutputOnMobile(!showOutputOnMobile)}
-        >
-          {showOutputOnMobile ? "< Code" : "Output >"}
-        </button>
-      </div>
+      <button
+        className="w-full px-3 py-2 font-mono text-sm bg-highlight text-link sm:hidden"
+        onClick={() => setShowOutputOnMobile(!showOutputOnMobile)}
+      >
+        {showOutputOnMobile ? "< Code" : "Output >"}
+      </button>
     </>
   );
 }

compiler/forget/packages/playground/components/Editor/monacoOptions.ts

@@ -21,4 +21,6 @@ export const monacoOptions: Partial<EditorProps["options"]> = {
   autoClosingBrackets: "languageDefined",
   autoClosingDelete: "always",
   autoClosingOvertype: "always",
+
+  automaticLayout: true,
 };

compiler/forget/packages/playground/package.json

@@ -17,7 +17,7 @@
     "@hpcc-js/wasm": "^1.15.0",
     "@monaco-editor/react": "^4.4.5",
     "@mui/material": "^5.9.1",
-    "@use-gesture/react": "^10.2.17",
+    "@use-gesture/react": "^10.2.20",
     "fflate": "^0.7.3",
     "hermes-eslint": "^0.9.0",
     "invariant": "^2.2.4",

compiler/forget/packages/playground/yarn.lock

@@ -697,17 +697,17 @@
     "@typescript-eslint/types" "5.28.0"
     eslint-visitor-keys "^3.3.0"
 
-"@use-gesture/core@10.2.17":
-  version "10.2.17"
-  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.17.tgz#dc78913cd5d105217c3f1d1c16a32ad6426a00ba"
-  integrity sha512-62hCybe4x6oGZ1/JA9gSYIdghV1FqxCdvYWt9SqCEAAikwT1OmVl2Q/Uu8CP636L57D+DfXtw6PWM+fdhr4oJQ==
+"@use-gesture/core@10.2.20":
+  version "10.2.20"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.20.tgz#b29e0aadd5e90336e599d849e50eef0e06aa28bf"
+  integrity sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ==
 
-"@use-gesture/react@^10.2.17":
-  version "10.2.17"
-  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.17.tgz#00bc413da42a358dd3f9173c0631b54522e76614"
-  integrity sha512-Vfrp1KgdYn/kOEUAYNXtGBCl2dr38s3G6rru1TOPs+cVUjfNyNxvJK56grUyJ336N3rQLK8F9G7+FfrHuc3g/Q==
+"@use-gesture/react@^10.2.20":
+  version "10.2.20"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.20.tgz#2d556a62c22200507b9d478ce7159057004acb8d"
+  integrity sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==
   dependencies:
-    "@use-gesture/core" "10.2.17"
+    "@use-gesture/core" "10.2.20"
 
 acorn-jsx@^5.3.2:
   version "5.3.2"