fix(website): keep hero terminal in viewport on mobile, stop page scroll jump

- Scroll only terminal body instead of scrollIntoView so page doesn't jump on new lines
- Cap terminal height on mobile (65vh) so it stays on screen; users can scroll past

Made-with: Cursor

Author: rithulkamesh

website/src/css/custom.css

@@ -828,6 +828,25 @@ button,
   min-height: 220px;
 }
 
+.hero-terminal-body-scroll {
+  max-height: 380px;
+  overflow-y: auto;
+}
+
+@media (max-width: 996px) {
+  .hero-terminal {
+    max-height: min(380px, 65vh);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hero-terminal-body-scroll {
+    max-height: min(380px, calc(65vh - 32px));
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 .term-line {
   display: flex;
   margin-bottom: 6px;

website/src/pages/index.js

@@ -62,9 +62,11 @@ function AnimatedTerminal() {
     return () => timeouts.forEach(clearTimeout);
   }, []);
 
-  const endRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
   useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+    }
   }, [lines]);
 
   return (
@@ -74,7 +76,7 @@ function AnimatedTerminal() {
         <div className="hero-terminal-dot yellow" />
         <div className="hero-terminal-dot green" />
       </div>
-      <div className="hero-terminal-body" style={{ maxHeight: '380px', overflowY: 'auto' }}>
+      <div ref={bodyRef} className="hero-terminal-body hero-terminal-body-scroll">
         {lines.map((line, i) => (
           <motion.div
             key={i}
@@ -107,7 +109,6 @@ function AnimatedTerminal() {
             <span className="term-text">_</span>
           </motion.div>
         )}
-        <div ref={endRef} />
       </div>
     </div>
   );