fix: editor overflow accounts for copy button

Author: brettkolodny

src/Editor.tsx

@@ -70,9 +70,9 @@ export const Editor: FC = () => {
 	}, [codeCopied]);
 
 	return (
-		<ResizablePanel className="flex flex-col items-start">
+		<ResizablePanel className="relative flex flex-col items-start">
 			{/* EDITOR TOP BAR */}
-			<div className="flex w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
+			<div className="flex h-12 w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
 				<div className="flex">
 					<button className="flex w-fit min-w-[120px] items-center gap-1 border-x bg-surface-secondary px-4 py-3 text-content-primary transition-colors hover:bg-surface-tertiary">
 						<FileJsonIcon className="w-[18px] min-w-[18px]" />
@@ -125,24 +125,25 @@ export const Editor: FC = () => {
 			</div>
 
 			{/* CODE EDITOR */}
-			<div className="relative h-full w-full overflow-y-scroll">
+			<div className="absolute mt-12 flex h-full w-full justify-end p-3">
 				<Button
-					className="absolute top-3 right-3 z-10"
+					className="z-10"
 					variant="subtle"
 					size="sm"
 					onClick={onCopy}
 				>
 					{codeCopied ? <CheckIcon /> : <CopyIcon />} Copy
 				</Button>
-				<div className="h-full w-full bg-surface-secondary font-mono">
-					<CodeEditor
-						value={$code}
-						onValueChange={(code) => $setCode(code)}
-						highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
-						textareaId="codeArea"
-						className="editor pt-3"
-					/>
-				</div>
+			</div>
+
+			<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
+				<CodeEditor
+					value={$code}
+					onValueChange={(code) => $setCode(code)}
+					highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
+					textareaId="codeArea"
+					className="editor pt-3"
+				/>
 			</div>
 		</ResizablePanel>
 	);