intermittent failure view fixes

Author: camd

ui/css/intermittent-failures.css

@@ -61,6 +61,23 @@ ul {
 }
 
 /* ReactTable style */
+.ReactTable .rt-thead .rt-tr,
+.ReactTable .rt-tbody .rt-tr,
+.ReactTable .rt-td,
+.ReactTable .rt-th {
+  text-align: left;
+}
+
+/* Keep pagination controls on one row */
+.ReactTable .-pagination {
+  flex-wrap: nowrap;
+}
+
+.ReactTable .-pagination .-center {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
 .ReactTable .-pagination .-btn:focus {
   box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
 }

ui/css/perf.css

@@ -799,3 +799,15 @@ li.pagination-active.active > button {
   font-size: 14px !important;
   color: white !important;
 }
+
+/* Consistent checkbox sizing for alerts table */
+.compare-table .form-check-input {
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: 0.125em;
+  cursor: pointer;
+}
+
+.compare-table .form-check-input:disabled {
+  cursor: not-allowed;
+}

ui/css/treeherder-custom-styles.css

@@ -10,6 +10,25 @@
  * when adding new styles.
  */
 
+/* Set base font size to match pre-Bootstrap 5 styling */
+html {
+  font-size: 14px;
+}
+
+/* Ensure Bootstrap components inherit the base font size */
+.btn:not(.job-btn):not(.runnable-job-btn):not(.btn-push):not(.btn-view-nav):not(.btn-view-nav-closed):not(.group-btn):not(.group-symbol):not(.group-select-all-runnable),
+.dropdown-toggle,
+.dropdown-item,
+.dropdown-menu,
+.form-control,
+.form-select,
+.input-group-text,
+.alert,
+.nav-link,
+a {
+  font-size: 1rem;
+}
+
 /* Bootstrap 4 will not show <a> as a link style if it has no href.
    This adds that style back. */
 .link-style {
@@ -315,6 +334,12 @@
   color: #0d7d8f;
 }
 
+.alert-info {
+  color: #0c5460;
+  background-color: #d1ecf1;
+  border-color: #bee5eb;
+}
+
 .alert-darker-info,
 .badge-darker-info {
   background: #0d7d8f;

ui/css/treeherder-navbar.css

@@ -73,14 +73,14 @@ label.dropdown-item.active,
 
 .navbar-right {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
 }
 
 .nav-menu-btn {
   margin-right: -4px;
   padding-left: 14px;
   padding-right: 14px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .nav-menu-btn.dropdown-toggle {
@@ -127,6 +127,7 @@ secondary-nav-bar {
   width: 100%;
   display: flex;
   background-color: #354048;
+  min-height: 33px;
 }
 
 .tree-closed {
@@ -257,7 +258,8 @@ secondary-nav-bar {
 
 .btn-unclassified-failures {
   margin-top: 1px;
-  padding: 3px 10px;
+  padding: 2px 8px;
+  font-size: 13px;
   background-color: rgba(78, 93, 21, 0.56);
   border-color: #9fa01d;
   color: lightgray;
@@ -303,13 +305,14 @@ fieldset[disabled] .btn-unclassified-failures.active {
   border-bottom: 0;
   border-top: 0;
   border-right: 0;
+  font-size: 0.875rem;
 }
 
 .btn-view-nav:hover,
 .btn-view-nav:focus,
 .btn-view-nav:active,
 .btn-view-nav.active {
-  background-color: #2c3133 !important;
+  background-color: #404446 !important;
   border-color: #1a1d20 !important;
   color: white;
 }
@@ -478,3 +481,8 @@ fieldset[disabled] .btn-view-nav-closed.active {
 .btn-watched-repo {
   padding: 0.375rem 0.5rem;
 }
+
+/* Remove caret from repository dropdown toggle */
+.no-caret::after {
+  display: none !important;
+}

ui/css/treeherder-pushes.css

@@ -4,7 +4,7 @@
 
 .push-bar {
   border-top: 1px solid black;
-  padding: 2px 0 1px 34px;
+  padding: 2px 0 1px 12px;
   white-space: nowrap;
   display: flex;
   flex-flow: row nowrap;
@@ -72,6 +72,7 @@
   padding-left: 9px;
   padding-right: 10px;
   border: 0;
+  font-size: 12px;
 }
 
 .btn-push:hover {
@@ -154,6 +155,7 @@ fieldset[disabled] .btn-push:hover {
   min-width: 14.5em;
   overflow: hidden;
   vertical-align: top;
+  text-align: left;
 }
 
 .job-row {
@@ -162,6 +164,7 @@ fieldset[disabled] .btn-push:hover {
   white-space: normal;
   word-break: normal;
   padding-top: 0;
+  text-align: left;
   padding-bottom: 0;
 }
 

ui/intermittent-failures/DateOptions.jsx

@@ -47,7 +47,7 @@ export default class DateOptions extends React.Component {
 
     return (
       <div className="d-inline-block">
-        <DropdownButton className="mr-3" title="date range">
+        <DropdownButton className="me-3" title="date range">
           <DropdownMenuItems
             options={dateOptions}
             updateData={this.updateDateRange}

ui/intermittent-failures/DateRangePicker.jsx

@@ -91,7 +91,7 @@ export default class DateRangePicker extends React.Component {
           isOutsideRange={(day) => moment().diff(day) < 0}
           phrases={defaultPhrases}
         />
-        <Button variant="secondary" className="ml-3" onClick={this.updateData}>
+        <Button variant="secondary" className="ms-3" onClick={this.updateData}>
           update
         </Button>
       </div>

ui/intermittent-failures/GraphsContainer.jsx

@@ -43,15 +43,14 @@ export default class GraphsContainer extends React.Component {
           )}
         </Row>
         <Row>
-          <Col xs="12" className="mx-auto pb-5">
-            <Button onClick={this.toggleAltViewGraph} className="mr-3">
+          <Col
+            xs="12"
+            className="mx-auto pb-5 d-flex gap-2 justify-content-center"
+          >
+            <Button variant="secondary" onClick={this.toggleAltViewGraph}>
               {showAlternateView ? 'Show graph view' : 'Show table view'}
             </Button>
-            <Button
-              variant="secondary"
-              onClick={this.toggleGraph}
-              className="d-inline-block mr-3"
-            >
+            <Button variant="secondary" onClick={this.toggleGraph}>
               {`${showGraphTwo ? 'less' : 'more'} ${
                 showAlternateView ? 'tables' : 'graphs'
               }`}

ui/intermittent-failures/MainView.jsx

@@ -111,7 +111,7 @@ const MainView = (props) => {
       Cell: (props) => (
         <div>
           <a
-            className="ml-1"
+            className="ms-1"
             target="_blank"
             rel="noopener noreferrer"
             href={`${getBugUrl(props.original.id)}`}

ui/intermittent-failures/Navigation.jsx

@@ -22,12 +22,25 @@ export default class Navigation extends React.Component {
   render() {
     const { updateState, tree, user, setUser, notify } = this.props;
     return (
-      <Navbar expand={false} fixed="top" className="top-navbar">
-        <LogoMenu
-          menuText="Intermittent Failures View"
-          colorClass="lightorange"
-        />
-        <Nav className="me-auto">
+      <Navbar
+        expand={false}
+        fixed="top"
+        className="top-navbar d-flex justify-content-between"
+        style={{
+          width: '100%',
+          maxWidth: '100vw',
+          paddingLeft: '0.5rem',
+          paddingRight: '0.5rem',
+        }}
+      >
+        <div
+          className="d-flex align-items-center gap-2"
+          style={{ flex: '1 1 auto', minWidth: 0 }}
+        >
+          <LogoMenu
+            menuText="Intermittent Failures View"
+            colorClass="lightorange"
+          />
           <Dropdown>
             <Dropdown.Toggle className="btn-navbar navbar-link" variant="dark">
               Tree
@@ -40,11 +53,14 @@ export default class Navigation extends React.Component {
               />
             </Dropdown.Menu>
           </Dropdown>
-        </Nav>
-        <Nav className="ms-auto">
+        </div>
+        <div
+          className="d-flex align-items-center gap-2"
+          style={{ flex: '0 0 auto' }}
+        >
           <HelpMenu />
           <Login user={user} setUser={setUser} notify={notify} />
-        </Nav>
+        </div>
       </Navbar>
     );
   }