Implementation of the space

src/components/keymap/header/keymap-header.component.scss

@@ -1,5 +1,9 @@
 @import '../../../main-app/global-styles';
 
+:host {
+    display: block;
+}
+
 .keymap {
     &__is-default {
 

src/components/popover/popover.component.scss

@@ -26,6 +26,10 @@
     }
 }
 
+.nav-tabs > li {
+    overflow: hidden;
+}
+
 .arrowCustom {
     position: absolute;
     top: -16px;

src/components/popover/popover.component.ts

@@ -53,9 +53,12 @@ enum TabName {
                 ]))
             ]),
             transition('closed => opened', [
+                style({
+                    visibility: 'visible'
+                }),
                 animate('200ms ease-out', keyframes([
-                    style({ transform: 'translateY(30px)', visibility: 'visible', opacity: 0, offset: 0 }),
-                    style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 1 })
+                    style({ transform: 'translateY(30px)', opacity: 0, offset: 0 }),
+                    style({ transform: 'translateY(0)', opacity: 1, offset: 1 })
                 ]))
             ])
         ])
@@ -148,7 +151,7 @@ export class PopoverComponent implements OnChanges {
     }
 
     private calculatePosition() {
-        const offsetLeft: number = this.wrapPosition.left + 265;
+        const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
         const popover: HTMLElement = this.popoverHost.nativeElement;
         let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
 
@@ -163,7 +166,8 @@ export class PopoverComponent implements OnChanges {
             newLeft -= popover.offsetWidth / 2;
         }
 
-        this.topPosition = this.keyPosition.top + this.keyPosition.height + 7;
+        // 7 is a space between a bottom key position and a popover
+        this.topPosition = this.keyPosition.top + this.keyPosition.height + 7 + window.scrollY;
         this.leftPosition = newLeft;
     }
 }

src/components/svg/wrap/svg-keyboard-wrap.component.scss

@@ -1,6 +1,10 @@
 :host {
     width: 100%;
     display: block;
+
+    &.space {
+        margin-bottom: 405px;
+    }
 }
 
 svg-keyboard {

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -2,6 +2,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    HostBinding,
     HostListener,
     Input,
     OnChanges,
@@ -107,6 +108,10 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     private wrapHost: HTMLElement;
     private keyElement: HTMLElement;
 
+    @HostBinding('class.space') get space() {
+        return this.popoverEnabled;
+    }
+
     @HostListener('window:resize')
     onResize() {
         if (this.wrapHost) {

src/main-app/main-app.component.scss

@@ -1,6 +1,6 @@
 main-app {
     display: block;
-    height: 100vh;
+    min-height: 100vh;
     width: 100%;
     overflow: hidden;
     position: relative;
@@ -11,7 +11,6 @@ main-app {
 }
 
 .main-content {
-    height: 100%;
     margin-left: 250px;
 }