Adapt OutputPanel layout

Author: fhammerschmidt

src/ConsolePanel.res

@@ -20,7 +20,7 @@ let make = (~logs, ~setLogs) => {
     Some(() => Webapi.Window.removeEventListener("message", cb))
   }, [])
 
-  <div className="px-2 py-6 relative">
+  <div className="px-2 py-6 relative flex flex-col flex-1 overflow-y-hidden">
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
@@ -44,7 +44,7 @@ let make = (~logs, ~setLogs) => {
         })
         ->React.array
 
-      <div className="whitespace-pre-wrap p-4 block"> content </div>
+      <div className="whitespace-pre-wrap p-4 overflow-auto"> content </div>
     }}
   </div>
 }

src/OutputPanel.res

@@ -1,6 +1,6 @@
 @react.component
 let make = (~runOutput, ~compilerState, ~logs, ~setLogs) => {
-  <div className="h-full">
+  <div className="h-full flex flex-col overflow-y-hidden">
     <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />
     <hr className="border-gray-60" />
     <ConsolePanel logs setLogs />

src/RenderPanel.res

@@ -25,7 +25,7 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
     None
   }, (compilerState, runOutput))
 
-  <div className={`px-2 relative ${validReact ? "h-1/2 py-2" : "h-auto py-6"}`}>
+  <div className={`px-2 relative ${validReact ? "flex-1 py-2 overflow-y-auto" : "h-auto py-6"}`}>
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null

src/common/EvalIFrame.res

@@ -82,5 +82,5 @@ let sendOutput = code => {
 
 @react.component
 let make = () => {
-  <iframe width="100%" id="iframe-eval" className="relative w-full text-gray-20" srcDoc />
+  <iframe width="100%" id="iframe-eval" className="relative h-full w-full text-gray-20" srcDoc />
 }