chore(netlify-cms-core): remove unnecessary wrapper elements (#1888)

packages/netlify-cms-core/src/components/App/App.js

@@ -72,7 +72,6 @@ class App extends React.Component {
     return (
       <ErrorContainer>
         <h1>{t('app.app.errorHeader')}</h1>
-
         <div>
           <strong>{t('app.app.configErrors')}:</strong>
           <ErrorCodeBlock>{config.get('error')}</ErrorCodeBlock>
@@ -160,7 +159,7 @@ class App extends React.Component {
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
     return (
-      <div>
+      <>
         <Notifs CustomComponent={Toast} />
         <Header
           user={user}
@@ -174,7 +173,6 @@ class App extends React.Component {
         />
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
-          <div>
           <Switch>
             <Redirect exact from="/" to={defaultPath} />
             <Redirect exact from="/search/" to={defaultPath} />
@@ -192,9 +190,8 @@ class App extends React.Component {
             <Route component={NotFoundPage} />
           </Switch>
           {useMediaLibrary ? <MediaLibrary /> : null}
-          </div>
         </AppMainContainer>
-      </div>
+      </>
     );
   }
 }

packages/netlify-cms-core/src/components/App/Header.js

@@ -22,13 +22,9 @@ const styles = {
   `,
 };
 
-const AppHeaderContainer = styled.header`
-  z-index: 300;
-`;
-
-const AppHeader = styled.div`
+const AppHeader = styled.header`
   ${shadows.dropMain};
-  position: fixed;
+  position: sticky;
   width: 100%;
   top: 0;
   background-color: ${colors.foreground};
@@ -136,7 +132,6 @@ class Header extends React.Component {
       .toList();
 
     return (
-      <AppHeaderContainer>
       <AppHeader>
         <AppHeaderContent>
           <nav>
@@ -188,7 +183,6 @@ class Header extends React.Component {
           </AppHeaderActions>
         </AppHeaderContent>
       </AppHeader>
-      </AppHeaderContainer>
     );
   }
 }

packages/netlify-cms-ui-default/src/styles.js

@@ -87,7 +87,7 @@ const lengths = {
   richTextEditorMinHeight: '300px',
   borderWidth: '2px',
   topCardWidth: '682px',
-  pageMargin: '84px 18px',
+  pageMargin: '28px 18px',
 };
 
 const borders = {