Use more padding and set max default content width in React and Console panels from Output tab

Author: mediremi

src/ConsolePanel.res

@@ -25,9 +25,11 @@ let make = (~logs, ~appendLog) => {
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
-      React.string(
-        "Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.",
-      )
+      <p className="p-4 max-w-prose">
+        {React.string(
+          "Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.",
+        )}
+      </p>
     | logs =>
       let content =
         logs

src/RenderPanel.res

@@ -4,9 +4,11 @@ let make = (~validReact) => {
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null
-      : React.string(
-          "Create a React component called 'App' if you want to render it here, then click 'Run' or enable 'Auto-run'.",
-        )}
+      : <p className="p-4 max-w-prose">
+          {React.string(
+            "Create a React component called 'App' if you want to render it here, then click 'Run' or enable 'Auto-run'.",
+          )}
+        </p>}
     <div className={validReact ? "h-full" : "h-0"}>
       <EvalIFrame />
     </div>