[resultui] fix build page not rendering correctly on Safari
1. Fix test results search bar not sticking to the top properly.
2. Fix "collapse all" button text wraps to the 2nd line.
3. Fix test results filter box too tall on Safari.
4. Update a screenshot in integration tests.
R=gavinmak@google.com, mwarton, nodir
Change-Id: Icfee1b11c75716b6b48be3f3768999f57178e00e
Reviewed-on: https://chromium-review.googlesource.com/c/infra/luci/luci-go/+/2971986
Auto-Submit: Weiwei Lin <weiweilin@google.com>
Reviewed-by: Matthew Warton <mwarton@google.com>
Reviewed-by: Gavin Mak <gavinmak@google.com>
Commit-Queue: Matthew Warton <mwarton@google.com>
diff --git a/milo/frontend/resultui/assets/styles/style.css b/milo/frontend/resultui/assets/styles/style.css
index a970f7f..199855a 100644
--- a/milo/frontend/resultui/assets/styles/style.css
+++ b/milo/frontend/resultui/assets/styles/style.css
@@ -53,4 +53,6 @@
--light-active-color: #d9edfc;
--delete-color: var(--failure-color);
--mdc-theme-primary: var(--active-color);
+
+ --expand-button-width: 155px;
}
diff --git a/milo/frontend/resultui/cypress/snapshots/test_results_tab.spec.ts/config-table-modal.snap.png b/milo/frontend/resultui/cypress/snapshots/test_results_tab.spec.ts/config-table-modal.snap.png
index 9e20c7b..6e687b4 100644
--- a/milo/frontend/resultui/cypress/snapshots/test_results_tab.spec.ts/config-table-modal.snap.png
+++ b/milo/frontend/resultui/cypress/snapshots/test_results_tab.spec.ts/config-table-modal.snap.png
Binary files differ
diff --git a/milo/frontend/resultui/src/components/auto_complete.ts b/milo/frontend/resultui/src/components/auto_complete.ts
index a318974..c28bb88 100644
--- a/milo/frontend/resultui/src/components/auto_complete.ts
+++ b/milo/frontend/resultui/src/components/auto_complete.ts
@@ -222,6 +222,7 @@
#input-box {
display: inline-block;
width: 100%;
+ height: 28px;
box-sizing: border-box;
padding: 0.3rem 0.5rem;
font-size: 1rem;
diff --git a/milo/frontend/resultui/src/pages/build_page/blamelist_tab.ts b/milo/frontend/resultui/src/pages/build_page/blamelist_tab.ts
index 00807d0..37e30a0 100644
--- a/milo/frontend/resultui/src/pages/build_page/blamelist_tab.ts
+++ b/milo/frontend/resultui/src/pages/build_page/blamelist_tab.ts
@@ -258,6 +258,7 @@
mwc-button {
margin-top: 1px;
+ width: var(--expand-button-width);
}
#repo-selector {
diff --git a/milo/frontend/resultui/src/pages/build_page/overview_tab.ts b/milo/frontend/resultui/src/pages/build_page/overview_tab.ts
index fcd6794..69e3087 100644
--- a/milo/frontend/resultui/src/pages/build_page/overview_tab.ts
+++ b/milo/frontend/resultui/src/pages/build_page/overview_tab.ts
@@ -606,7 +606,7 @@
}
mwc-button {
- width: 145px;
+ width: 155px;
}
`,
];
diff --git a/milo/frontend/resultui/src/pages/build_page/steps_tab.ts b/milo/frontend/resultui/src/pages/build_page/steps_tab.ts
index a0b47b6..781c7ac 100644
--- a/milo/frontend/resultui/src/pages/build_page/steps_tab.ts
+++ b/milo/frontend/resultui/src/pages/build_page/steps_tab.ts
@@ -129,7 +129,7 @@
mwc-button {
margin-top: 1px;
- width: 145px;
+ width: var(--expand-button-width);
}
.config-section {
diff --git a/milo/frontend/resultui/src/pages/test_results_tab.ts b/milo/frontend/resultui/src/pages/test_results_tab.ts
index 70a6efe..9ef3ada 100644
--- a/milo/frontend/resultui/src/pages/test_results_tab.ts
+++ b/milo/frontend/resultui/src/pages/test_results_tab.ts
@@ -160,6 +160,11 @@
static styles = [
commonStyle,
css`
+ :host {
+ /* Required to make 'position: sticky' work in Safari. */
+ display: block;
+ }
+
#header {
display: grid;
grid-template-columns: auto auto 1fr auto;
@@ -177,7 +182,7 @@
}
mwc-button {
margin-top: 1px;
- width: 145px;
+ width: var(--expand-button-width);
}
.filters-container {
