Better scroll area

components/REPL/index.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import REPLInput from "./REPLInput";
 import REPLHistory from "./REPLHistory";
+import styles from "../../styles/REPL/REPLComplete.module.css";
 
 const REPL = () => {
     const [history, manipulateHistory] = useState<string[]>([]);
@@ -12,11 +13,11 @@ const REPL = () => {
         if (inputRef.current) inputRef.current.focus();
     }
 
-    return (<>
+    return (<div className={styles.container}>
         <REPLHistory history={history} inputRef={inputRef} />
         <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
         <div style={{flexGrow: 2}} onClick={focusInput}></div>
-    </>);
+    </div>);
 };
 
 export default REPL;

styles/REPL/REPLComplete.module.css

@@ -0,0 +1,6 @@
+.container {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 2;
+}

styles/REPL/REPLHistory.module.css

@@ -1,5 +1,4 @@
 .container {
-    overflow: auto;
     display: flex;
     flex-direction: column-reverse;
     flex-shrink: 2;