MOBILE-2567 ux: Fix ios header size

src/app/app.scss

@@ -42,6 +42,11 @@
   text-transform: none;
 }
 
+[dir="ltr"] body, [dir="rtl"] body {
+    padding-top: constant(safe-area-inset-top); //for iOS 11.2
+    padding-top: env(safe-area-inset-top); //for iOS 11.1
+}
+
 @include media-breakpoint-up(sm) {
   .core-center-view .scroll-content {
     display: flex!important;

src/components/context-menu/core-context-menu.html

@@ -1,4 +1,4 @@
-<button [hidden]="hideMenu" ion-button clear icon-only [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)">
+<button [hidden]="hideMenu" ion-button clear icon-only [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)" class="bar-button">
     <core-icon [name]="icon"></core-icon>
 </button>
 <ng-content></ng-content>

src/components/ion-tabs/ion-tabs.scss

@@ -83,9 +83,7 @@ core-ion-tab.show-tab {
 }
 
 .ios {
-    core-ion-tab > .ion-page > ion-header .toolbar-ios {
-      padding-top: 4px;
-    }
+    @include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
 }
 
 .md {

src/components/split-view/split-view.scss

@@ -1,4 +1,4 @@
-core-split-view {
+ion-app.app-root core-split-view {
     ion-menu.split-pane-side {
         display: block;
 
@@ -37,15 +37,6 @@ core-split-view {
         display: none;
     }
     ion-content.statusbar-padding:first-child .scroll-content {
-        padding-top: 0 !important;
+        padding-top: 0  !important;
     }
 }
-
-.ios .split-pane {
-    .core-avoid-header ion-content.statusbar-padding,
-    .core-avoid-header .menu-inner > ion-content {
-         top: $navbar-ios-height;
-         height: calc(100% - #{($navbar-ios-height)});
-    }
-
-}

src/components/tabs/tabs.ts

@@ -311,7 +311,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
             const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth;
 
             if (width) {
-                this.maxSlides = Math.floor(width / 120);
+                this.maxSlides = Math.floor(width / 100);
 
                 return;
             }

src/theme/variables.scss

@@ -147,7 +147,7 @@ $loading-ios-spinner-color: $core-loading-spinner-color;
 $spinner-ios-ios-color: $core-spinner-color;
 $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
-$toolbar-ios-height: 44px + 15;
+$toolbar-ios-height: 44px + 15; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
 
 // App Material Design Variables
@@ -164,7 +164,6 @@ $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
 $button-md-outline-background-color: $core-button-outline-background-color;
 $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
 
-
 // App Windows Variables
 // --------------------------------------------------
 // Windows only Sass variables can go here
@@ -275,6 +274,16 @@ $core-question-state-incorrect-color: $red-light !default;
   }
 }
 
+@mixin app-root() {
+  $root: #{&};
+  @at-root ion-app.app-root {
+    #{$root} {
+      @content;
+    }
+  }
+}
+
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";