Bug 1610242 - Fix push-health navbars

ui/push-health/Health.jsx

@@ -172,7 +172,7 @@ export default class Health extends React.PureComponent {
           repo={repo}
           revision={revision}
         >
-          <Navbar color="light" light expand="sm">
+          <Navbar color="light" light expand="sm" className="w-100">
             {!!tests && (
               <Nav className="metric-buttons mb-2 pt-2 pl-3 justify-content-between w-100">
                 <span>

ui/push-health/Navigation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge, Navbar } from 'reactstrap';
+import { Badge, Navbar, Nav } from 'reactstrap';
 
 import LogoMenu from '../shared/LogoMenu';
 import { getJobsUrl } from '../helpers/url';
@@ -23,26 +23,28 @@ export default class Navigation extends React.PureComponent {
 
     return (
       <React.Fragment>
-        <Navbar dark color="dark" sticky="top">
-          <LogoMenu menuText="Push Health" />
-          <h4>
-            <Badge color={overallResult}>
-              <a
-                href={getJobsUrl({ repo, revision })}
-                className="text-white"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span title="repository">{repo}</span> -
-                <span title="revision" className="ml-1">
-                  {revision}
-                </span>
-              </a>
-            </Badge>
-          </h4>
-          <Login user={user} setUser={setUser} notify={notify} />
+        <Navbar dark color="dark" sticky="top" className="flex-column">
+          <Nav className="w-100 justify-content-between">
+            <LogoMenu menuText="Push Health" />
+            <h4>
+              <Badge color={overallResult}>
+                <a
+                  href={getJobsUrl({ repo, revision })}
+                  className="text-white"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span title="repository">{repo}</span> -
+                  <span title="revision" className="ml-1">
+                    {revision}
+                  </span>
+                </a>
+              </Badge>
+            </h4>
+            <Login user={user} setUser={setUser} notify={notify} />
+          </Nav>
+          {children}
         </Navbar>
-        {children}
       </React.Fragment>
     );
   }