From e72eb9bc5a081572755d73f7aa65579fc0e7498a Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 11 Oct 2022 09:40:09 +0300
Subject: [PATCH] Fix UI for mobile (#2293)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/global.scss               | 10 ++++++++++
 packages/ui/src/components/StylishEdit.svelte   |  4 ++++
 packages/ui/src/components/internal/Root.svelte |  8 ++++++--
 packages/ui/src/utils.ts                        |  2 +-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 6a340aac96..0473cc854c 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -68,6 +68,9 @@
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   // transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
+:root {
+  --app-height: 100%;
+}
 
 ::-webkit-scrollbar {
   width: 6px;
@@ -110,3 +113,10 @@ body {
   background-color: var(--body-color);
   user-select: none;
 }
+
+html,
+body {
+  height: var(--app-height);
+  width: 100%;
+  overflow: hidden;
+}
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index bc9b1c300b..c9832f9493 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -39,6 +39,8 @@
       on:input
       autocomplete="off"
       placeholder=" "
+      spellcheck="false"
+      autocapitalize="off"
     />
   {:else}
     <input
@@ -53,6 +55,8 @@
       on:input
       autocomplete="off"
       placeholder=" "
+      spellcheck="false"
+      autocapitalize="off"
     />
   {/if}
   {#if label}
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index deb3487d15..b6ec2e1d77 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -68,6 +68,8 @@
   $: $deviceInfo.docHeight = docHeight
   $: $deviceInfo.isPortrait = isPortrait
   $: $deviceInfo.isMobile = isMobile
+
+  $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`)
 </script>
 
 <svelte:window bind:innerWidth={docWidth} bind:innerHeight={docHeight} />
@@ -127,7 +129,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    // height: 100vh;
+    height: 100%;
+    // height: var(--app-height);
 
     .status-bar {
       min-height: var(--status-bar-height);
@@ -163,7 +167,7 @@
     }
 
     .app {
-      height: calc(100vh - var(--status-bar-height));
+      height: calc(100% - var(--status-bar-height));
       // min-width: 600px;
       // min-height: 480px;
 
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index f06e8dfa01..87799f46cf 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -41,5 +41,5 @@ export function fetchMetadataLocalStorage<T> (id: Metadata<T>): T | null {
 }
 
 export function checkMobile (): boolean {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|Opera Mini/i.test(navigator.userAgent)
 }