feat(web-host): Prevent bouncing effect when scrolling on the REPL page (multiple scrolling containers)

Author: topheman

packages/web-host/src/components/ReplPage.tsx

@@ -9,7 +9,7 @@ export const ReplPage = ({ onBackToHome }: ReplPageProps) => {
   const wasm = useWasm();
 
   return (
-    <div className="container mx-auto px-4 max-w-4xl">
+    <div className="container mx-auto px-4 max-w-4xl" data-page="repl">
       <div className="sticky top-0 py-2 bg-gray-50">
         <div className="flex items-center justify-between md:mb-10 my-2">
           <h2 className="text-lg font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-wasi-purple)] to-[var(--color-wasi-violet)] drop-shadow">

packages/web-host/src/index.css

@@ -43,6 +43,15 @@ body {
   color: #222;
 }
 
+/* Prevent bouncing effect when scrolling on the REPL page (multiple scrolling containers) */
+body:has([data-page="repl"]) {
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
 /* Focus styles for better accessibility */
 button:focus-visible {
   outline: 2px solid var(--color-primary);