diff --git a/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx b/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx
index 3260cadf5a..69f245ae66 100644
--- a/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx
+++ b/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>
   );
 }
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index e127c7bef6..1e45c80a5d 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/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>
     </>
   );
 }
diff --git a/compiler/forget/packages/playground/components/Editor/monacoOptions.ts b/compiler/forget/packages/playground/components/Editor/monacoOptions.ts
index 3c38e027b9..06b342cfc3 100644
--- a/compiler/forget/packages/playground/components/Editor/monacoOptions.ts
+++ b/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,
 };
diff --git a/compiler/forget/packages/playground/package.json b/compiler/forget/packages/playground/package.json
index 3000e97cbb..1060cc072e 100644
--- a/compiler/forget/packages/playground/package.json
+++ b/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",
diff --git a/compiler/forget/packages/playground/yarn.lock b/compiler/forget/packages/playground/yarn.lock
index e328b566a9..00dbcd6c89 100644
--- a/compiler/forget/packages/playground/yarn.lock
+++ b/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"