fix css style

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

@@ -130,7 +130,10 @@ class PageRevisionList extends React.Component {
         <div className={classNames.join(' ')}>
           <div className="d-flex">
             <div className="mr-auto">{ t('page_history.revision') }</div>
-            <div>{ t('page_history.comparing_source') }<span className="ml-2 mr-2">/</span>{ t('page_history.comparing_target') }</div>
+            <div className="d-flex row">
+              <div>{ t('page_history.comparing_source') }</div>
+              <div className="ml-2">{ t('page_history.comparing_target') }</div>
+            </div>
           </div>
           <div className="revision-history-list-body">
             {revisionList}

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

@@ -17,30 +17,32 @@ const RevisionSelector = (props) => {
 
   return (
     <React.Fragment>
-      <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="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>
       </div>
     </React.Fragment>
   );