On mobile browsers (Opera Browser specifically), when the address bar is visible, the bottom of the screen gets cut off.

### Issue type

**I'm submitting a ...** (check one with "x")

* [ x ] bug report
* [ ] feature request

### Issue description

**Current behavior:**
On mobile browsers (Opera Browser specifically), when the address bar is visible, the bottom of the screen gets cut off. This is due to the usage of 100vh when setting height values in [_layout.component.theme.scss](https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/_layout.component.theme.scss)

**Expected behavior:**
The height should be correctly set to the visible portion of the window.

**Steps to reproduce:**
I am currently experiencing this behaviour on [this app](https://www.xamcademy.com/courses#exam1), to reproduce, please open the link in Opera browser on your mobile phone.

Here's [an article](https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html) better explaining the issue as well as possible solutions.

Also am attaching a screenshot of Chrome devtools debugger attached to Opera Browser on my phone. It clearly shows the greyed out area of the screen which is unusable, causing content on the page to be hidden at the bottom.


**Related code:**

```
.scrollable-container {
height: calc(100vh - #{$padding-top});
box-shadow: nb-theme(layout-window-shadow);
}
```

### Other information:

**npm, node, OS, Browser**
```

```

**Angular, Nebular**
```
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.1.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@nebular/auth": "4.5.0",
"@nebular/bootstrap": "4.5.0",
"@nebular/security": "4.5.0",
"@nebular/theme": "4.5.0",
"@ng-bootstrap/ng-bootstrap": "^5.1.4",
```