fix style

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -36,14 +36,14 @@ class PageRevisionList extends React.Component {
     const revisionId = revision._id;
     const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
 
-    const classNames = ['revision-history-outer'];
+    const classNames = ['revision-history-outer', 'row', 'no-gutters'];
     if (isContiguousNodiff) {
       classNames.push('revision-history-outer-contiguous-nodiff');
     }
 
     return (
       <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <div className="d-flex" key={`revision-history-top-${revisionId}`}>
+        <div className="col-8" key={`revision-history-top-${revisionId}`}>
           <Revision
             t={this.props.t}
             revision={revision}
@@ -54,13 +54,13 @@ class PageRevisionList extends React.Component {
             onDiffOpenClicked={this.props.onDiffOpenClicked}
             key={`revision-history-rev-${revisionId}`}
           />
-          <div className="align-self-center ml-auto">
-            <RevisionSelector
-              revision={revision}
-              hasDiff={hasDiff}
-              key={`revision-compare-target-selector-${revisionId}`}
-            />
-          </div>
+        </div>
+        <div className="col-4 align-self-center">
+          <RevisionSelector
+            revision={revision}
+            hasDiff={hasDiff}
+            key={`revision-compare-target-selector-${revisionId}`}
+          />
         </div>
         { hasDiff
           && (
@@ -128,15 +128,17 @@ class PageRevisionList extends React.Component {
         </div>
         <hr />
         <div className={classNames.join(' ')}>
-          <div className="d-flex">
-            <div className="mr-auto">{ t('page_history.revision') }</div>
-            <div className="d-flex row">
-              <div>{ t('page_history.comparing_source') }</div>
-              <div className="ml-2">{ t('page_history.comparing_target') }</div>
+          <div className="revision-history-list-container">
+            <div className="revision-history-list-content-header sticky-top bg-white">
+              <div className="row no-gutters">
+                <div className="col-8">{ t('page_history.revision') }</div>
+                <div className="col-2 text-center">{ t('page_history.comparing_source') }</div>
+                <div className="col-2 text-center">{ t('page_history.comparing_target') }</div>
+              </div>
             </div>
-          </div>
-          <div className="revision-history-list-body">
+            <div className="revision-history-list-content-body">
             {revisionList}
+            </div>
           </div>
         </div>
       </React.Fragment>

src/client/js/components/RevisionComparer/RevisionSelector.jsx

@@ -17,31 +17,37 @@ const RevisionSelector = (props) => {
 
   return (
     <React.Fragment>
-      <div className="d-flex">
-        <div className="custom-control custom-radio custom-control-inline">
-          <input
-            type="radio"
-            className="custom-control-input"
-            id={`compareSource-${revision._id}`}
-            name="compareSource"
-            value={revision._id}
-            checked={revision._id === sourceRevision?._id}
-            onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
-          />
-          <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
-        </div>
-        <div className="custom-control custom-radio custom-control-inline">
-          <input
-            type="radio"
-            className="custom-control-input"
-            id={`compareTarget-${revision._id}`}
-            name="compareTarget"
-            value={revision._id}
-            checked={revision._id === targetRevision?._id}
-            onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
-            disabled={revisionComparerContainer.state.compareWithLatest}
-          />
-          <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
+      <div className="container-fluid px-0">
+        <div className="row no-gutters">
+          <div className="col text-center">
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareSource-${revision._id}`}
+                name="compareSource"
+                value={revision._id}
+                checked={revision._id === sourceRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
+              />
+              <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
+            </div>
+          </div>
+          <div className="col text-center">
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareTarget-${revision._id}`}
+                name="compareTarget"
+                value={revision._id}
+                checked={revision._id === targetRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
+                disabled={revisionComparerContainer.state.compareWithLatest}
+              />
+              <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
+            </div>
+          </div>
         </div>
       </div>
     </React.Fragment>

src/client/styles/scss/_page-history.scss

@@ -1,56 +1,58 @@
 .revision-history {
   .revision-history-list {
-    .revision-history-list-body {
+    .revision-history-list-container {
       min-height: 200px;
       max-height: calc(100vh - 100px - 550px);
       overflow: auto;
     }
 
-    .revision-history-outer {
-      // add border-top except of first element
-      &:not(:first-of-type) {
-        @extend .border-top;
-      }
-
-      .revision-history-main {
-        .picture-lg {
-          width: 32px;
-          height: 32px;
+    .revision-history-list-content-body {
+      .revision-history-outer {
+        // add border-top except of first element
+        &:not(:first-of-type) {
+          @extend .border-top;
         }
 
-        .revision-history-meta {
-          a:hover {
-            cursor: pointer;
+        .revision-history-main {
+          .picture-lg {
+            width: 32px;
+            height: 32px;
           }
-        }
 
-        .caret {
-          transition: 0.4s;
-          transform: rotate(-90deg);
+          .revision-history-meta {
+            a:hover {
+              cursor: pointer;
+            }
+          }
+
+          .caret {
+            transition: 0.4s;
+            transform: rotate(-90deg);
 
-          &.caret-opened {
-            transform: rotate(0deg);
+            &.caret-opened {
+              transform: rotate(0deg);
+            }
           }
         }
-      }
 
-      .revision-history-main-nodiff {
-        .picture-container {
-          min-width: 32px;
-          text-align: center; // centering .picture
+        .revision-history-main-nodiff {
+          .picture-container {
+            min-width: 32px;
+            text-align: center; // centering .picture
+          }
         }
-      }
 
-      .revision-history-diff {
-        padding-left: 40px;
-        color: $gray-900;
-        table-layout: fixed;
+        .revision-history-diff {
+          padding-left: 40px;
+          color: $gray-900;
+          table-layout: fixed;
+        }
       }
-    }
 
-    li {
-      position: relative;
-      list-style: none;
+      li {
+        position: relative;
+        list-style: none;
+      }
     }
   }