fix hackmd height

src/client/js/app.jsx

@@ -8,8 +8,9 @@ import loggerFactory from '@alias/logger';
 import ErrorBoundary from './components/ErrorBoudary';
 import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
+// import PageEditor from './components/PageEditor';
 import DisplaySwitcher from './components/Page/DisplaySwitcher';
-// import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
+import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
 // import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page from './components/Page';
@@ -110,14 +111,17 @@ if (pageContainer.state.path != null) {
 // additional definitions if user is logged in
 if (appContainer.currentUser != null) {
   Object.assign(componentMappings, {
+    // 'page-editor': <PageEditor />,
     'display-switcher': <DisplaySwitcher />,
+    'editor-navbar-bottom': <EditorNavbarBottom />,
+
   });
 
-  if (pageContainer.state.pageId != null) {
-    Object.assign(componentMappings, {
-      // 'page-editor-with-hackmd': <PageEditorByHackmd />,
-    });
-  }
+  // if (pageContainer.state.pageId != null) {
+  //   Object.assign(componentMappings, {
+  //     'page-editor-with-hackmd': <PageEditorByHackmd />,
+  //   });
+  // }
 }
 
 Object.keys(componentMappings).forEach((key) => {

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -147,7 +147,7 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden) {
     return (
-      <div className="grw-subnav d-flex align-items-center justify-content-between">
+      <div className="grw-subnav d-flex align-items-center justify-content-between mt-5">
         <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
     );

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -39,18 +39,17 @@ const DisplaySwitcher = (props) => {
         <TabPane tabId="view">
           <Page />
         </TabPane>
-        {/* <div id="edit"> */}
         <TabPane tabId="edit">
-          <>
+          <div id="page-editor" className="page-editor-preview-container page-editor-preview-body">
             <Editor />
             <EditorNavbarBottom />
-          </>
+          </div>
         </TabPane>
-        {/* </div> */}
         <TabPane tabId="hackmd">
-          <PageEditorByHackmd />
-          <EditorNavbarBottom />
-
+          <div id="page-editor-with-hackmd" className="hackmd-preinit hackmd-error">
+            <PageEditorByHackmd />
+            <EditorNavbarBottom />
+          </div>
         </TabPane>
       </TabContent>
     </>

src/client/styles/scss/_mixins.scss

@@ -36,8 +36,8 @@
       flex: 1;
       flex-direction: column;
 
-      .tab-pane#edit,
-      .tab-pane#hackmd {
+      #edit,
+      #hackmd {
         height: calc(100vh - #{$header-plus-footer});
         min-height: calc(100vh - #{$header-plus-footer}); // for IE11
       }
@@ -72,8 +72,8 @@
         .hackmd-error,
         #iframe-hackmd-container > iframe {
           width: 100%;
-          height: calc(100vh - #{$header-plus-footer});
-          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
+          height: calc(90vh - #{$header-plus-footer});
+          min-height: calc(90vh - #{$header-plus-footer}); // for IE11
         }
       }
     }