ProgramView: prevent code from wrapping and use scrolling instead

src/components/HeapView.tsx

@@ -113,7 +113,7 @@ export default function HeapView({ className, machine }: { className?: string, m
 			width: 100 + 40 * numVals,
 			height: 100
 		}
-	}).filter<Node>((x):x is Node => Boolean(x)); // When stepping back, some nodes become undefined. This filters them out
+	}).filter<Node>((x): x is Node => Boolean(x)); // When stepping back, some nodes become undefined. This filters them out
 	const layouted = getLayoutedElements(nodes, edges);
 
 	return (

src/components/ProgramView.tsx

@@ -230,14 +230,14 @@ export default function ProgramView({ className, machine, setMachine, setStep, l
 				</Popover>
 			</div>
 			<Separator />
-			<div className={"relative grow m-2 overflow-y-auto"}>
-				<div className="h-max relative m-2">
+			<div className="relative grow m-2 overflow-y-auto p-2 flex flex-col">
+				<div className="relative w-full min-w-max grow">
+					<pre className={"relative z-10 bg-transparent selection:bg-accent" + (loaded ? "" : " pointer-events-none")}>{highlighted}</pre>
 					<code>
 						<textarea className={"absolute inset-0 bg-transparent text-transparent caret-primary p-4 font-semibold \
-							resize-none selection:bg-accent selection:text-transparent w-full h-full overflow-visible" + (!loaded ? "" : " pointer-events-none")}
+							resize-none selection:bg-accent selection:text-transparent w-full h-full overflow-hidden text-nowrap whitespace-pre" + (!loaded ? "" : " pointer-events-none")}
 							onChange={inputHandler} value={programText} spellCheck={false} disabled={loaded} />
 					</code>
-					<pre className={"relative z-10 bg-transparent text-wrap selection:bg-accent" + (loaded ? "" : " pointer-events-none")}>{highlighted}</pre>
 				</div>
 			</div>
 		</div>