From f76387ac6a927bb8653b86cb700f6eb2631649c5 Mon Sep 17 00:00:00 2001
From: Vanalite <dhnghia0604@gmail.com>
Date: Thu, 18 Sep 2025 15:42:22 +0700
Subject: [PATCH] feat: Disable zoom and setup mobile viewport

---
 web-app/src/main.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/web-app/src/main.tsx b/web-app/src/main.tsx
index 4f48ec043..7cd390f56 100644
--- a/web-app/src/main.tsx
+++ b/web-app/src/main.tsx
@@ -8,6 +8,47 @@ import { routeTree } from './routeTree.gen'
 import './index.css'
 import './i18n'
 
+// Mobile-specific viewport and styling setup
+const setupMobileViewport = () => {
+  // Check if running on mobile platform (iOS/Android via Tauri)
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ||
+                   window.matchMedia('(max-width: 768px)').matches
+
+  if (isMobile) {
+    // Update viewport meta tag to disable zoom
+    let viewportMeta = document.querySelector('meta[name="viewport"]')
+    if (viewportMeta) {
+      viewportMeta.setAttribute('content',
+        'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'
+      )
+    }
+
+    // Add mobile-specific styles for status bar
+    const style = document.createElement('style')
+    style.textContent = `
+      body {
+        padding-top: env(safe-area-inset-top);
+        padding-bottom: env(safe-area-inset-bottom);
+        padding-left: env(safe-area-inset-left);
+        padding-right: env(safe-area-inset-right);
+      }
+
+      #root {
+        min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+      }
+
+      /* Prevent zoom on input focus */
+      input, textarea, select {
+        font-size: 16px !important;
+      }
+    `
+    document.head.appendChild(style)
+  }
+}
+
+// Initialize mobile setup
+setupMobileViewport()
+
 // Create a new router instance
 const router = createRouter({ routeTree })