Skip to content

Commit

Permalink
report: fix sticky table header in DevTools (#14766)
Browse files Browse the repository at this point in the history
  • Loading branch information
adamraine authored Feb 8, 2023
1 parent e6e8f5a commit 0b8c63d
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 4 deletions.
9 changes: 6 additions & 3 deletions report/assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@
--sparkline-height: 5px;
--stackpack-padding-horizontal: 10px;
--sticky-header-background-color: var(--report-background-color);
--sticky-header-buffer: calc(var(--topbar-height) + var(--sticky-header-height));
--sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2);
--table-higlight-background-color: hsla(210, 17%, 77%, 0.1);
--tools-icon-color: var(--color-gray-600);
Expand Down Expand Up @@ -284,6 +285,7 @@
.lh-container:not(.lh-topbar + .lh-container) {
--topbar-height: 0;
--sticky-header-height: 0;
--sticky-header-buffer: 0;
}

.lh-devtools.lh-root {
Expand All @@ -296,6 +298,8 @@
.lh-devtools .lh-container {
overflow-y: scroll;
height: calc(100% - var(--topbar-height));
/** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */
--sticky-header-buffer: calc(var(--sticky-header-height));
}
@media print {
.lh-devtools .lh-container {
Expand Down Expand Up @@ -1414,8 +1418,7 @@
max-width: var(--report-content-max-width);
margin: 0 auto;

--topbar-plus-sticky-header: calc(var(--topbar-height) + var(--sticky-header-height));
scroll-margin-top: var(--topbar-plus-sticky-header);
scroll-margin-top: var(--sticky-header-buffer);

/* Faster recalc style & layout of the report. https://web.dev/content-visibility/ */
content-visibility: auto;
Expand Down Expand Up @@ -1510,7 +1513,7 @@

.lh-table thead th {
position: sticky;
top: calc(var(--topbar-plus-sticky-header) + 1em);
top: calc(var(--sticky-header-buffer) + 1em);
z-index: 1;
background-color: var(--report-background-color);
border-bottom: 1px solid var(--report-border-color-secondary);
Expand Down
2 changes: 1 addition & 1 deletion report/renderer/components.js

Large diffs are not rendered by default.

0 comments on commit 0b8c63d

Please sign in to comment.