Modal fullscreen Header Bar is not tall enough in iPad

Ionic Framework ionic-v3
1

What is the CSS code to give a fullscreen Modal’s Header to be tall enough so that the title and the buttons are not touching the status bar? Please see screenshot below:

30
Simulator Screen Shot - iPad Air 2 - 2018-06-14 at 13.22.30.png987×1317 50.2 KB

Below is my current code (which I have been using and has worked for Ionic 1.x) on how to make the modal fullscreen and how to adjust the header bar so as to not make it very short and overlapping the status bar.

@media (min-width: 680px) {
  .fullscreen-modal {
     .modal-wrapper {
        color: #f00 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
      }
   }
   /* For mobile iPad only */
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * { margin-top: 20px; }
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
       height: 64px;
   }
   .platform-ios.platform-cordova .modal-wrapper .modal .has-header,
   .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
       top: 64px;
   }
}

Please note that this is only in Simulator iPad Air.
Node: v10.x
Ionic: 3
MacOS: 10.13.4
Xcode: 9.3

Thanks in advance.