fix: improve xterm mobile touch scrolling and readability

Add custom touch event handlers for smoother scroll on mobile devices,
increase font size for touch screens, enable smooth scroll animation,
and add CSS for iOS momentum scrolling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Remote Agent

packages/ui/src/hooks/useTerminal.ts

@@ -121,15 +121,19 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
       if (isDisposed) return;
 
       // Initialize xterm with macOS Terminal-like appearance
+      const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
       xterm = new Terminal({
         cursorBlink: true,
         cursorStyle: 'block',
-        fontSize: 11,
+        fontSize: isMobile ? 13 : 11,
         fontFamily: '"Fira Code", "SF Mono", "Menlo", "Monaco", "Cascadia Code", "Consolas", monospace',
         fontWeight: '500',
         fontWeightBold: '600',
         lineHeight: 1.2,
         letterSpacing: 0,
+        scrollback: 5000,
+        smoothScrollDuration: isMobile ? 100 : 0,
         allowTransparency: false,
         theme: {
           background: '#1e1e1e',
@@ -244,9 +248,38 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 
       container.addEventListener('paste', handlePaste);
       container.addEventListener('contextmenu', handleContextMenu);
+
+      // Improve mobile touch scrolling: boost scroll speed and momentum
+      let touchStartY = 0;
+      let touchScrollCleanup: (() => void) | null = null;
+      if (isMobile) {
+        const handleTouchStart = (e: TouchEvent) => {
+          touchStartY = e.touches[0].clientY;
+        };
+        const handleTouchMove = (e: TouchEvent) => {
+          if (!xterm) return;
+          const deltaY = touchStartY - e.touches[0].clientY;
+          touchStartY = e.touches[0].clientY;
+          // Scroll by lines based on touch delta (amplify for momentum feel)
+          const lines = Math.round(deltaY / 10);
+          if (lines !== 0) {
+            xterm.scrollLines(lines);
+          }
+          // Prevent page scroll while scrolling terminal
+          e.preventDefault();
+        };
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        touchScrollCleanup = () => {
+          container.removeEventListener('touchstart', handleTouchStart);
+          container.removeEventListener('touchmove', handleTouchMove);
+        };
+      }
+
       pasteCleanup = () => {
         container.removeEventListener('paste', handlePaste);
         container.removeEventListener('contextmenu', handleContextMenu);
+        touchScrollCleanup?.();
       };
 
       xtermRef.current = xterm;

packages/ui/src/index.css

@@ -77,6 +77,17 @@
   background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
 }
 
+/* Improve xterm touch scrolling on mobile */
+@media (pointer: coarse) {
+  .xterm .xterm-viewport {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto !important;
+  }
+  .xterm .xterm-screen {
+    touch-action: pan-y;
+  }
+}
+
 /* Git diff view enhancements */
 .diff-view-container {
   --diff-add-bg: rgba(46, 160, 67, 0.15);