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,39 +323,39 @@ export default class CompareTableControls extends React.Component {
           updateFilterText={this.updateFilterText}
           dropdownOptions={dropdownOptions}
         />
-        <div className="download-json-pagination-container">
-          <div />
-          {viewablePagesList
-            ? hasMorePages() && (
-                <Row className="justify-content-center">
-                  <PaginationGroup
-                    viewablePageNums={viewablePagesList}
-                    updateParams={validated.updateParams}
-                    currentPage={page}
-                    count={countPages}
-                  />
-                </Row>
-              )
-            : null}
-          <div>
-            {formattedJSONData.length > 0 && (
-              <Button
-                className="btn download-button"
-                type="button"
-                href={`data:text/json;charset=utf-8,${encodeURIComponent(
-                  JSON.stringify(formattedJSONData),
-                )}`}
-                download="perf-compare.json"
-                data-testid="download-button"
-              >
-                <FontAwesomeIcon
-                  icon={faFileDownload}
-                  className="download-json-icon"
+
+        <div />
+        {viewablePagesList
+          ? hasMorePages() && (
+              <Row className="justify-content-center">
+                <PaginationGroup
+                  viewablePageNums={viewablePagesList}
+                  updateParams={validated.updateParams}
+                  currentPage={page}
+                  count={countPages}
                 />
-                JSON (experimental)
-              </Button>
-            )}
-          </div>
+              </Row>
+            )
+          : null}
+
+        <div className="download-json-container">
+          {formattedJSONData.length > 0 && (
+            <Button
+              className="btn download-button"
+              type="button"
+              href={`data:text/json;charset=utf-8,${encodeURIComponent(
+                JSON.stringify(formattedJSONData),
+              )}`}
+              download="perf-compare.json"
+              data-testid="download-button"
+            >
+              <FontAwesomeIcon
+                icon={faFileDownload}
+                className="download-json-icon"
+              />
+              JSON (experimental)
+            </Button>
+          )}
         </div>
         {showNoise && showTestsWithNoise}
 
@@ -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}