added new scroll to demo logic

components/EditorOverview.vue

@@ -67,7 +67,7 @@ const { $track } = useNuxtApp();
 function playDemoClicked(){
   demoEnabled.value = true;
 
-  demoCanvas.value?.scrollIntoViewIfNeeded();
+  smoothScrollToView(demoCanvas.value)
 
   const isMobile = window.matchMedia('(max-width: 710px)').matches;
 
@@ -77,22 +77,47 @@ function playDemoClicked(){
      * contenteditable element which is not presents on a page in a moment of button click
      *
      * So we use fake invisible input to focus it first, then change focus to our editor
+     * 
+     * setTimeout is used because the virtual keyboard interrupts scroll
      */
-    (document.querySelector('.fake-input') as HTMLElement).focus();
+
+    setTimeout(()=>{
+        (document.querySelector('.fake-input') as HTMLElement).focus();
 
-    const block: HTMLElement | null = document.querySelector('.ce-paragraph');
+      const block: HTMLElement | null = document.querySelector('.ce-paragraph');
 
-    if (block !== null){
+      if (block !== null){
 
-      block.focus()
-    }
+        block.focus()
+      }
+    },1000)
   }
 
   /**
    * Send analytics event
    */
   $track(AnalyticEvent.PlayWithDemoClicked)
 }
+
+
+/**
+   * Scroll the target element to 33% from top of the screen
+   */
+function smoothScrollToView(targetEle:HTMLElement|null) {
+
+    if (!targetEle) {
+        return;
+    }
+
+    const targetPosition = targetEle.getBoundingClientRect().top + window.scrollY;
+    const screenHeight = window.innerHeight;
+    const targetOffset = targetPosition - (screenHeight / 3); 
+
+    window.scrollTo({
+        top: targetOffset,
+        behavior: 'smooth'
+    });
+}
 </script>
 
 <style lang="postcss">