fix(client): fix mobile layout width overflow on virtual keyboard toggle (#1197)

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 {

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;

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;

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;
+  }
+}