Modal fullscreen Header Bar is not tall enough in iPad


#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:

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.