Fix UI for mobile (#2293)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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

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}

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;
 

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)
 }