fix playground

Author: jderochervlk

app/routes/TryRoute.res

@@ -61,7 +61,7 @@ let default = () => {
     {switch data {
     | Some({bundleBaseUrl, versions}) => <ClientOnly bundleBaseUrl versions />
     | None =>
-      <div className="text-xl text-red-500 self-center">
+      <div className="mt-16 p-5 text-xl text-red-500 self-center">
         <h1> {React.string("Oops an error occurred!")} </h1>
         {React.string("The playground cannot be loaded, please try again in a few moments.")}
       </div>

src/Playground.res

@@ -1802,7 +1802,6 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   let subPanelRef = React.useRef(Nullable.null)
 
   let onResize = () => {
-    Console.debug("resizing playground...")
     let newLayout = window.innerWidth < breakingPoint ? Column : Row
     setLayout(_ => newLayout)
     switch panelRef.current->Nullable.toOption {
@@ -2012,7 +2011,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     <button key={Int.toString(i)} onClick className disabled> {title} </button>
   })
 
-  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14 h-100"}>
+  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14"}>
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
@@ -2021,7 +2020,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
       editorRef
     />
     <div
-      className={`flex bg-gray-100 ${layout == Column ? "flex-col" : "flex-row"}`}
+      className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
       ref={ReactDOM.Ref.domRef((Obj.magic(panelRef): React.ref<Nullable.t<Dom.element>>))}
     >
       // Left Panel