Trying to make a good layout for the test page

apps/webapp/app/components/code/JSONEditor.tsx

@@ -87,7 +87,10 @@ export function JSONEditor(opts: JSONEditorProps) {
 
   return (
     <div
-      className={cn("no-scrollbar overflow-y-auto", opts.className)}
+      className={cn(
+        "overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700",
+        opts.className
+      )}
       ref={editor}
       onBlur={() => {
         if (!onBlur) return;

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx

@@ -167,9 +167,9 @@ export default function Page() {
   }
 
   return (
-    <div>
+    <div className="h-full">
       <Form
-        className="flex flex-col gap-2"
+        className="grid max-h-full grid-rows-[2rem_minmax(300px_1fr)_2rem] gap-2"
         method="post"
         {...form.props}
         onSubmit={(e) => submitForm(e)}
@@ -224,13 +224,17 @@ export default function Page() {
           </Popover>
         </div>
 
-        <JSONEditor
-          defaultValue={defaultJson}
-          readOnly={false}
-          basicSetup
-          onChange={(v) => (currentJson.current = v)}
-        />
-        <FormError id={payload.errorId}>{payload.error}</FormError>
+        <div>
+          <JSONEditor
+            defaultValue={defaultJson}
+            readOnly={false}
+            basicSetup
+            onChange={(v) => (currentJson.current = v)}
+            minHeight="300px"
+            maxHeight="100%"
+          />
+          <FormError id={payload.errorId}>{payload.error}</FormError>
+        </div>
         <div className="flex justify-end">
           <Button type="submit" variant="primary/medium">
             Run test