fix navbar layout for edit

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -76,9 +76,9 @@ const EditorNavbarBottom = (props) => {
         </Collapse>
         )
       }
-      <div className={`navbar navbar-expand border-top px-2 ${additionalClasses.join(' ')}`}>
+      <div className={`navbar navbar-expand border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
         <form className="form-inline">
-          { isDrawerMode && renderDrawerButton() }
+          { isDeviceSmallerThanMd && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
         <form className="form-inline flex-nowrap ml-auto">
@@ -115,7 +115,7 @@ const EditorNavbarBottom = (props) => {
         <Collapse isOpen={isExpanded}>
           <div className="px-2"> {/* set padding for border-top */}
             <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
-              <form className="form-inline ml-md-auto">
+              <form className="form-inline ml-auto">
                 <OptionsSelector />
               </form>
             </div>

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -247,7 +247,7 @@ class OptionsSelector extends React.Component {
   render() {
     return (
       <div className="d-flex flex-row">
-        <span className="ml-sm-3">{this.renderThemeSelector()}</span>
+        <span>{this.renderThemeSelector()}</span>
         <span className="ml-2 ml-sm-4">{this.renderKeymapModeSelector()}</span>
         <span className="ml-2 ml-sm-4">{this.renderConfigurationDropdown()}</span>
       </div>

src/client/styles/scss/_on-edit.scss

@@ -11,8 +11,9 @@ body:not(.on-edit) {
 body.on-edit {
   overflow-y: hidden !important;
 
-  .container {
-    max-width: 100%;
+  .container-fluid {
+    padding-right: 15px;
+    padding-left: 15px;
   }
 
   .grw-navbar {
@@ -120,7 +121,6 @@ body.on-edit {
    */
   .grw-subnav {
     padding-bottom: 0;
-    padding-left: 15px;
   }
 
   h1 {