optimize code

frontend/src/pages/wiki2/main-panel.js

@@ -35,6 +35,16 @@ class MainPanel extends Component {
     this.scrollRef = React.createRef();
   }
 
+  getHeaderHeight = () => {
+    const pageCover = document.getElementById('wiki-page-cover');
+    const pageCoverHeight = pageCover?.offsetHeight || 0;
+    const pageTitle = document.getElementById('wiki-page-title');
+    const pageTitleHeight = pageTitle?.offsetHeight || 0;
+
+    const topNavHeight = 44;
+    return pageCoverHeight + pageTitleHeight + topNavHeight;
+  };
+
   static getDerivedStateFromProps(props, state) {
     const { seadoc_access_token, currentPageId, config } = props;
     const appConfig = window.app.config;
@@ -57,7 +67,7 @@ class MainPanel extends Component {
 
   render() {
     const { permission, pathExist, isDataLoading, isViewFile, config, onUpdatePage } = this.props;
-    const { currentPageConfig = {}, } = this.state;
+    const { currentPageConfig = {} } = this.state;
     const isViewingFile = pathExist && !isDataLoading && isViewFile;
     const isReadOnly = !(permission === 'rw');
 
@@ -69,9 +79,7 @@ class MainPanel extends Component {
             currentPageId={this.props.currentPageId}
             currentPageConfig={currentPageConfig}
           />
-          {username &&
-            <Account />
-          }
+          {username && <Account />}
         </div>
         <div className="main-panel-center">
           <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
@@ -88,6 +96,7 @@ class MainPanel extends Component {
                     docUuid={this.state.docUuid}
                     isWikiReadOnly={isReadOnly}
                     scrollRef={this.scrollRef}
+                    getHeaderHeight={this.getHeaderHeight}
                   />
                 </div>
               </div>

frontend/src/pages/wiki2/wiki-right-header/index.js

@@ -1,14 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import PageCover from './page-cover';
 import PageTitle from './page-title';
 
-export default function RightHeader({ currentPageConfig, onUpdatePage }) {
+function RightHeader({ currentPageConfig, onUpdatePage }) {
 
   const props = { currentPageConfig, onUpdatePage };
   return (
-    <div className='wiki-page-header-wrapper'>
+    <>
       <PageCover {...props} />
       <PageTitle {...props} />
-    </div>
+    </>
   );
 }
+
+RightHeader.propTypes = {
+  currentPageConfig: PropTypes.object,
+  onUpdatePage: PropTypes.func,
+};
+
+export default RightHeader;

frontend/src/pages/wiki2/wiki-right-header/page-cover.js

@@ -49,7 +49,7 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
 
   return (
     <>
-      <div className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
         <div className={classNames('wiki-page-cover__controller', {show: isShowCoverController})}>
           <div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>

frontend/src/pages/wiki2/wiki-right-header/page-title.css

@@ -1,6 +1,7 @@
 .wiki-page-title-wrapper {
   position: relative;
-  padding: 0 50px 0 142px;
+  width: 100%;
+  padding: 0 142px;
 }
 
 .wiki-page-icon-wrapper {

frontend/src/pages/wiki2/wiki-right-header/page-title.js

@@ -61,7 +61,7 @@ const PageTitle = ({ currentPageConfig, onUpdatePage }) => {
 
 
   return (
-    <div className='wiki-page-title-wrapper' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <div id="wiki-page-title" className='wiki-page-title-wrapper' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {currentPageConfig.icon && (
         <HeaderIcon currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
       )}

frontend/src/pages/wiki2/wiki.css

@@ -27,6 +27,7 @@ body {
 /* wiki editor */
 .cur-view-content .sdoc-scroll-container {
   display: flex;
+  min-height: 0;
   overflow: auto;
 }
 
@@ -35,15 +36,17 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  align-items: center;
+  width: 100%;
 }
 
 .wiki-editor-container .sdoc-editor-container {
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-height: auto;
+  min-height: 0;
+  min-width: 0;
   width: 100%;
-  min-width: 1100px;
 }
 
 .wiki-editor-container .sdoc-editor-container .sdoc-content-wrapper {
@@ -51,8 +54,11 @@ body {
 }
 
 .wiki-editor-container .sdoc-editor-container .sdoc-editor-content {
+  display: flex;
   flex-direction: column;
   position: static;
+  min-width: 0;
+  width: 100%;
 }
 
 .sdoc-editor-container .sdoc-article-container {
@@ -68,7 +74,7 @@ body {
   justify-content: center;
   min-height: 800px;
   width: 100%;
-  padding: 15px 142px 0px 142px;
+  padding: 0 142px;
   box-shadow: none;
   border: none;
 }