From 605a38d8abbd6d64d30bd1c1d3bf106b8acdc9ca Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Tue, 13 Jun 2023 18:16:07 +0100
Subject: [PATCH] Trying to make a good layout for the test page

---
 .../webapp/app/components/code/JSONEditor.tsx |  5 ++++-
 .../route.tsx                                 | 22 +++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/code/JSONEditor.tsx b/apps/webapp/app/components/code/JSONEditor.tsx
index ace2e4b35..326ab6065 100644
--- a/apps/webapp/app/components/code/JSONEditor.tsx
+++ b/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;
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx
index 843370d98..83a92e082 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx
+++ b/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