Bug 1746198 - Compare View - Fix pagination position (#7347)

* Bug 1746198 - Compare View - Fix pagination position

* Address PR changes

ui/css/perf.css

@@ -597,21 +597,26 @@ li.pagination-active.active > button {
   margin-left: 5px;
 }
 
-.download-json-pagination-container {
+.download-json-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
+  margin-bottom: 15px;
 }
 
-.download-json-pagination-container .download-button {
+.download-json-container .download-button {
   background-color: transparent !important;
   color: #1f7d8e !important;
 }
 
-.download-json-pagination-container .download-button:hover {
+.download-json-container .download-button:hover {
   background-color: #1f7d8e !important;
   color: white !important;
 }
 
-.download-json-pagination-container .download-json-icon {
+.download-json-container .download-json-icon {
   margin-right: 10px;
 }
+
+.bottom-pagination-container {
+  margin-top: 30px;
+}

ui/perfherder/compare/CompareTableControls.jsx

@@ -323,7 +323,7 @@ export default class CompareTableControls extends React.Component {
           updateFilterText={this.updateFilterText}
           dropdownOptions={dropdownOptions}
         />
-        <div className="download-json-pagination-container">
+
         <div />
         {viewablePagesList
           ? hasMorePages() && (
@@ -337,7 +337,8 @@ export default class CompareTableControls extends React.Component {
               </Row>
             )
           : null}
-          <div>
+
+        <div className="download-json-container">
           {formattedJSONData.length > 0 && (
             <Button
               className="btn download-button"
@@ -356,7 +357,6 @@ export default class CompareTableControls extends React.Component {
             </Button>
           )}
         </div>
-        </div>
         {showNoise && showTestsWithNoise}
 
         {results.size > 0 ? (
@@ -382,7 +382,7 @@ export default class CompareTableControls extends React.Component {
 
         {viewablePagesList
           ? hasMorePages() && (
-              <Row className="justify-content-center">
+              <Row className="justify-content-center bottom-pagination-container">
                 <PaginationGroup
                   viewablePageNums={viewablePagesList}
                   updateParams={validated.updateParams}