fix(ui): add opt-in mobile keyboard resize mode and stabilize touch terminal input (#1107)

* fix(ui): add opt-in mobile keyboard resize mode

* fix(ui): stabilize touch terminal input and tab layout

* fix(ui): narrow touch terminal handling to mobile and tablet

* fix(ui): refine touch terminal input handling

* fix(ui): re-key terminal viewport on session id

* fix(ui): avoid touch-laptop terminal overlay regression

* fix(ui): hide ghostty system caret surfaces

* fix(settings): normalize mobile keyboard mode sanitization

* fix(ui): honor terminal quick keys toggle on mobile

* fix(ui): gate mobile keyboard resize mode on iOS

---------

Co-authored-by: vhqtvn <8930337+vhqtvn@users.noreply.github.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/web/index.html

@@ -28,7 +28,9 @@
       const defaultShortName = 'OpenChamber';
       const pwaNameStorageKey = 'openchamber.pwaName';
       const pwaOrientationStorageKey = 'openchamber.pwaOrientation';
+      const mobileKeyboardModeStorageKey = 'openchamber.mobileKeyboardMode';
       const pwaRecentSessionsStorageKey = 'openchamber.pwaRecentSessions';
+      const viewportBaseContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
 
       const normalizePwaName = (value, fallback) => {
         if (typeof value !== 'string') {
@@ -55,6 +57,57 @@
         return fallback;
       };
 
+      const normalizeMobileKeyboardMode = (value, fallback = 'native') => {
+        if (value === 'native' || value === 'resize-content') {
+          return value;
+        }
+        return fallback;
+      };
+
+      const supportsMobileKeyboardResizeContent = () => {
+        const userAgent = navigator.userAgent || '';
+        const platform = navigator.platform || '';
+        const maxTouchPoints = navigator.maxTouchPoints || 0;
+        const isIOS = /iPhone|iPad|iPod/i.test(userAgent)
+          || ((/Macintosh|MacIntel/i.test(userAgent) || /MacIntel/i.test(platform)) && maxTouchPoints > 1);
+
+        return !isIOS;
+      };
+
+      const getSupportedMobileKeyboardMode = (mode) => {
+        if (mode === 'resize-content' && !supportsMobileKeyboardResizeContent()) {
+          return 'native';
+        }
+        return mode;
+      };
+
+      const getViewportContentForMobileKeyboardMode = (value) => {
+        const mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(value, 'native'));
+        return mode === 'resize-content'
+          ? `${viewportBaseContent}, interactive-widget=resizes-content`
+          : viewportBaseContent;
+      };
+
+      const applyStoredMobileKeyboardMode = () => {
+        let mode = 'native';
+        try {
+          mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(localStorage.getItem(mobileKeyboardModeStorageKey), 'native'));
+          if (mode === 'native') {
+            localStorage.removeItem(mobileKeyboardModeStorageKey);
+          }
+        } catch {
+          mode = 'native';
+        }
+
+        document.documentElement.setAttribute('data-oc-mobile-keyboard-mode', mode);
+        const viewportMeta = document.querySelector('meta[name="viewport"]');
+        if (viewportMeta) {
+          viewportMeta.setAttribute('content', getViewportContentForMobileKeyboardMode(mode));
+        }
+      };
+
+      applyStoredMobileKeyboardMode();
+
       const getStoredInstallName = () => {
         try {
           const storedName = localStorage.getItem(pwaNameStorageKey);