style: adjust element hierarchy

frontend/src/pages/sdoc/sdoc-file-history/index.css

@@ -87,6 +87,7 @@
 
 
 .sdoc-file-history .sdoc-file-history-content {
+  display: flex;
   height: 100%;
   width: 100%;
 }
@@ -107,6 +108,7 @@
 
 .sdoc-file-history.mobile .sdoc-file-history-container .sdoc-file-history-content .sdoc-editor-content {
   padding: 0;
+  min-width: auto;
 }
 
 .sdoc-file-history .sdoc-file-history-content .sdoc-scroll-container {
@@ -118,6 +120,10 @@
   flex-direction: row;
 }
 
+.sdoc-editor-container.mobile .sdoc-editor-content.readonly .sdoc-article-container {
+  width: 100%;
+}
+
 .sdoc-file-history .sdoc-file-history-content .sdoc-article-container {
   width: 100%;
   padding-top: 0;

frontend/src/pages/sdoc/sdoc-file-history/index.js

@@ -367,12 +367,15 @@ class SdocFileHistory extends React.Component {
                 <Loading />
               </div>
             ) : (
+              <>
                 <DiffViewer
                   currentContent={currentVersionContent}
                   lastContent={isShowChanges ? lastVersionContent : ''}
                   didMountCallback={this.setDiffCount}
-                rightSideDrawer={
+                />
-                  showSidePanel && <SidePanel
+                {
+                  showSidePanel && (
+                    <SidePanel
                       isShowChanges={isShowChanges}
                       currentVersion={currentVersion}
                       onSelectHistoryVersion={this.onSelectHistoryVersion}
@@ -380,8 +383,9 @@ class SdocFileHistory extends React.Component {
                       sidePanelInitData={sidePanelInitData}
                       onClose={this.changeSidePanelStatus}
                     />
+                  )
                 }
-              />
+              </>
             )}
           </div>
         </div>