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