From e48b615598473c3f441b60949ec8c9a2ce6d295a Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Tue, 31 Jan 2023 10:36:31 -0500
Subject: [PATCH] [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 | 2 +-
 compiler/forget/packages/playground/components/Editor/index.tsx | 2 +-
 compiler/forget/packages/playground/components/Header.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/compiler/forget/packages/playground/components/Editor/Input.tsx b/compiler/forget/packages/playground/components/Editor/Input.tsx
index df96ad2e17..d71e059ab4 100644
--- a/compiler/forget/packages/playground/components/Editor/Input.tsx
+++ b/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
diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index ebe59d98b2..dd8e8cee3d 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/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")}
diff --git a/compiler/forget/packages/playground/components/Header.tsx b/compiler/forget/packages/playground/components/Header.tsx
index 8d6383b9ac..8ef80a1d5e 100644
--- a/compiler/forget/packages/playground/components/Header.tsx
+++ b/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(