[playground] Fix header when horizontal scrolling

Fixes a minor annoyance 

Before 

![Screenshot 2023-01-31 at 10 39 06 
AM](https://user-images.githubusercontent.com/1390709/215806108-f3b084d3-c693-404b-a9b3-785d0f15c332.png) 

After 

![Screenshot 2023-01-31 at 10 33 15 
AM](https://user-images.githubusercontent.com/1390709/215804818-c94a5905-e278-4380-af44-6ab34ac95ff3.png)

compiler/forget/packages/playground/components/Editor/Input.tsx

@@ -98,7 +98,7 @@ export default function Input({ errors }: Props) {
     <div className="relative flex flex-col flex-none border-r border-gray-200">
       {/* Restrict MonacoEditor's height, since the config autoLayout:true
           will grow the editor to fit within parent element */}
-      <div className="w-full h-screen">
+      <div className="w-full" style={{ height: "calc(100vh - 3.5rem)" }}>
         <MonacoEditor
           path={"index.js"}
           // .js and .jsx files are specified to be TS so that Monaco can actually

compiler/forget/packages/playground/components/Editor/index.tsx

@@ -150,7 +150,7 @@ export default function Editor() {
 
   return (
     <>
-      <div className="flex basis h-full">
+      <div className="flex basis relative top-14">
         <div
           style={{ minWidth: 650 }}
           className={clsx("relative sm:basis-1/4")}

compiler/forget/packages/playground/components/Header.tsx

@@ -46,7 +46,7 @@ export default function Header() {
   };
 
   return (
-    <div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200">
+    <div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200 fixed bg-white z-10 h-14">
       <div className="flex items-center flex-none h-full gap-2 text-lg">
         <Logo
           className={clsx(