I found that on small phones like the iPhone 8 (resolution 750x 1334) that the top of the header overlaps with the phone's status bar. To fix this I used below java script and added a conditional CSS class to the header container adding 20px margin to the top of the container. A fix like this could be added to the Outsystems UI.

 if($parameters.iOS) {   

    var ratio=window.devicePixelRatio||1;

    var screen={ 

        width: window.screen.width*ratio,

        height: window.screen.height*ratio

};

if(screen.width===750&&

screen.height===1334){

    $parameters.IsIphone8 = true;

        }

 }