[style]history-panel (#2946)

frontend/src/css/file-history.css

@@ -122,3 +122,33 @@
   text-decoration: none;
   color: #6e7687;
 }
+
+.history-content .main-panel {
+  flex: 1 1 auto;
+}
+
+.history-content .history-side-panel {
+  flex: 0 0 auto;
+  user-select: none;
+  border-left: 1px solid #e5e5e5;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-content .history-side-panel .history-side-panel-title {
+  height: 50px;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 50px;
+  font-size: 1rem;
+  padding: 0 10px;
+  background-color: rgb(250,250,249);
+  font-weight: bolder;
+}
+
+@media (min-width:992px) {
+  .history-side-panel {
+    width: 260px;
+  }
+}
+

frontend/src/file-history.js

@@ -88,12 +88,12 @@ class FileHistory extends React.Component {
           </div>
         </div>
         <div id="main" className="history-content">
-          <SidePanel onItemClick={this.onHistoryItemClick}/>
           <MainPanel 
             newMarkdownContent={this.state.newMarkdownContent}
             oldMarkdownContent={this.state.oldMarkdownContent}
             renderingContent={this.state.renderingContent}
           />
+          <SidePanel onItemClick={this.onHistoryItemClick}/>
         </div>
       </Fragment>
     );

frontend/src/pages/file-history/side-panel.js

@@ -97,9 +97,9 @@ class SidePanel extends React.Component {
 
   render() {
     return (
-      <div className="side-panel">
+      <div className="side-panel history-side-panel">
         <div className="side-panel-center">
-          <div className="panel-header">{gettext('History Versions')}</div>
+          <div className="history-side-panel-title">{gettext('History Versions')}</div>
           <div className="history-body">
             {this.state.isLoading && <Loading />}
             {this.state.historyInfo &&