From 3f7242aee86d28c4aa74f7046cfb6d85f07e7ba0 Mon Sep 17 00:00:00 2001
From: VTxyer <vtxyer@gmail.com>
Date: Mon, 1 Jun 2026 11:44:23 +0800
Subject: [PATCH] fix(client): fix mobile layout width overflow on virtual
 keyboard toggle (#1197)

---
 packages/client/src/App.vue                   |  3 ++-
 .../src/components/hermes/chat/ChatInput.vue  |  4 ++++
 .../hermes/group-chat/GroupChatInput.vue      |  4 ++++
 packages/client/src/styles/global.scss        | 24 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 896a44a..062eb8f 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -87,7 +87,8 @@ useKeyboard()
 .app-layout {
   display: flex;
   height: calc(100 * var(--vh));
-  width: 100vw;
+  width: 100%;
+  max-width: 100%;
   overflow: hidden;
 
   &.no-sidebar {
diff --git a/packages/client/src/components/hermes/chat/ChatInput.vue b/packages/client/src/components/hermes/chat/ChatInput.vue
index dcfc5e6..957c5a3 100644
--- a/packages/client/src/components/hermes/chat/ChatInput.vue
+++ b/packages/client/src/components/hermes/chat/ChatInput.vue
@@ -971,6 +971,10 @@ function isImage(type: string): boolean {
   min-height: 20px;
   overflow-y: auto;
 
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+
   &::placeholder {
     color: $text-muted;
     white-space: nowrap;
diff --git a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
index e9f3020..5002e55 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
@@ -686,6 +686,10 @@ function isImage(type: string): boolean {
     min-height: 20px;
     overflow-y: auto;
 
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
+
     &::placeholder {
         color: $text-muted;
         white-space: nowrap;
diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss
index 4f820f8..ade7419 100644
--- a/packages/client/src/styles/global.scss
+++ b/packages/client/src/styles/global.scss
@@ -84,7 +84,16 @@ html.theme-transitioning *::after {
               box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
 }
 
-html, body, #app {
+html, body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -205,3 +214,16 @@ a {
     width: 100%;
   }
 }
+
+// Prevent iOS Safari auto-zoom on input focus by ensuring font-size is at least 16px
+@media (max-width: 768px) {
+  input,
+  textarea,
+  select,
+  .n-input,
+  .n-input__input-element,
+  .n-input__textarea-el,
+  .n-input__textarea-element {
+    font-size: 16px !important;
+  }
+}