Header padding component for desktop

src/components/HeaderGap/index.desktop.js

@@ -0,0 +1,8 @@
+import React, {PureComponent} from 'react';
+import {View} from 'react-native';
+
+export default class HeaderGap extends PureComponent {
+    render() {
+        return (<View style={{height: 12}} />);
+    }
+}

src/components/HeaderGap/index.js

@@ -0,0 +1,7 @@
+import {PureComponent} from 'react';
+
+export default class HeaderGap extends PureComponent {
+    render() {
+        return null;
+    }
+}

src/pages/NewChatPage.js

@@ -13,6 +13,7 @@ import {hide as hideSidebar} from '../libs/actions/Sidebar';
 import CONST from '../CONST';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import {redirectToLastReport} from '../libs/actions/App';
+import HeaderGap from '../components/HeaderGap';
 
 const personalDetailsPropTypes = PropTypes.shape({
     // The login of the person (either email or phone number)
@@ -134,6 +135,7 @@ class NewChatPage extends Component {
 
         return (
             <>
+                <HeaderGap />
                 <HeaderWithCloseButton
                     title="New Chat"
                     onCloseButtonPress={redirectToLastReport}

src/pages/NewGroupPage.js

@@ -14,6 +14,7 @@ import {hide as hideSidebar} from '../libs/actions/Sidebar';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import {redirectToLastReport} from '../libs/actions/App';
+import HeaderGap from '../components/HeaderGap';
 
 const personalDetailsPropTypes = PropTypes.shape({
     // The login of the person (either email or phone number)
@@ -207,6 +208,7 @@ class NewGroupPage extends Component {
         const {headerTitle, headerMessage} = this.getHeaderTitleAndMessage(maxParticipantsReached);
         return (
             <>
+                <HeaderGap />
                 <HeaderWithCloseButton
                     title="New Group"
                     onCloseButtonPress={redirectToLastReport}

src/pages/SearchPage.js

@@ -13,6 +13,7 @@ import {hide as hideSidebar} from '../libs/actions/Sidebar';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import {fetchOrCreateChatReport} from '../libs/actions/Report';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderGap from '../components/HeaderGap';
 
 const personalDetailsPropTypes = PropTypes.shape({
     // The login of the person (either email or phone number)
@@ -119,6 +120,7 @@ class SearchPage extends Component {
 
         return (
             <>
+                <HeaderGap />
                 <HeaderWithCloseButton
                     title="Search"
                     onCloseButtonPress={redirectToLastReport}

src/pages/SettingsPage.js

@@ -15,6 +15,7 @@ import {version} from '../../package.json';
 import AvatarWithIndicator from '../components/AvatarWithIndicator';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import {redirectToLastReport} from '../libs/actions/App';
+import HeaderGap from '../components/HeaderGap';
 
 const propTypes = {
     /* Onyx Props */
@@ -56,6 +57,7 @@ const SettingsPage = ({
     }
     return (
         <>
+            <HeaderGap />
             <HeaderWithCloseButton
                 title="Settings"
                 onCloseButtonPress={redirectToLastReport}

src/pages/home/ReportScreen.js

@@ -9,6 +9,7 @@ import compose from '../../libs/compose';
 import ReportView from './report/ReportView';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderView from './HeaderView';
+import HeaderGap from '../../components/HeaderGap';
 
 const propTypes = {
     /* Onyx Props */
@@ -97,6 +98,7 @@ class ReportScreen extends Component {
             >
                 {() => (
                     <>
+                        <HeaderGap />
                         <HeaderView
                             shouldShowNavigationMenuButton={this.props.isSmallScreenWidth}
                             onNavigationMenuButtonClicked={this.props.toggleNavigationMenu}

src/pages/home/sidebar/SidebarLinks.js

@@ -17,6 +17,7 @@ import AvatarWithIndicator from '../../../components/AvatarWithIndicator';
 import {getSidebarOptions} from '../../../libs/OptionsListUtils';
 import {getDefaultAvatar} from '../../../libs/actions/PersonalDetails';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
+import HeaderGap from '../../../components/HeaderGap';
 
 const propTypes = {
     // Toggles the navigation menu open and closed
@@ -100,6 +101,7 @@ class SidebarLinks extends React.Component {
 
         return (
             <View style={[styles.flex1, styles.h100]}>
+                <HeaderGap />
                 <View
                     style={[
                         styles.flexRow,

web/index.html

@@ -21,7 +21,6 @@
         #root > div > div {
             height: 100% !important;
         }
-
         #drag-area {
             -webkit-app-region: drag;
         }