[playground] Fix header when horizontal scrolling
Fixes a minor annoyance Before  After 
Lauren Tan committed
Jan 31, 2023 at 10:36 UTC
e48b615598473c3f441b60949ec8c9a2ce6d295a
3 files changed
+3
-3
compiler/forget/packages/playground/components/Editor/Input.tsx
+1
-1
@@ -98,7 +98,7 @@ export default function Input({ errors }: Props) {
98
<div className="relative flex flex-col flex-none border-r border-gray-200">
99
{/* Restrict MonacoEditor's height, since the config autoLayout:true
100
will grow the editor to fit within parent element */}
101
- <div className="w-full h-screen">
101
+ <div className="w-full" style={{ height: "calc(100vh - 3.5rem)" }}>
102
<MonacoEditor
103
path={"index.js"}
104
// .js and .jsx files are specified to be TS so that Monaco can actually
compiler/forget/packages/playground/components/Editor/index.tsx
+1
-1
@@ -150,7 +150,7 @@ export default function Editor() {
150
151
return (
152
<>
153
- <div className="flex basis h-full">
153
+ <div className="flex basis relative top-14">
154
<div
155
style={{ minWidth: 650 }}
156
className={clsx("relative sm:basis-1/4")}
compiler/forget/packages/playground/components/Header.tsx
+1
-1
@@ -46,7 +46,7 @@ export default function Header() {
46
};
47
48
return (
49
- <div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200">
49
+ <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">
50
<div className="flex items-center flex-none h-full gap-2 text-lg">
51
<Logo
52
className={clsx(