Merge "Stick topHeader in change list"

polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

@@ -40,8 +40,7 @@ limitations under the License.
         background-color: #f5fafd;
       }
       :host([selected]) {
-        border: 1px solid #2a66d9;
-        border-left-width: .5rem;
+        border-left: .5rem solid #2a66d9;
       }
       :host([needs-review]) {
         font-family: var(--font-family-bold);
@@ -105,10 +104,6 @@ limitations under the License.
         :host {
           display: flex;
         }
-        :host([selected]) {
-          border: none;
-          border-top: 1px solid #ddd;
-        }
       }
     </style>
     <style include="gr-change-list-styles"></style>

polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html

@@ -38,6 +38,9 @@ limitations under the License.
       gr-change-list {
         width: 100%;
       }
+      gr-user-header {
+        border-bottom: 1px solid #ddd;
+      }
       nav {
         align-items: center;
         background-color: var(--view-background-color);;

polygerrit-ui/app/styles/gr-change-list-styles.html

@@ -19,13 +19,13 @@ limitations under the License.
       :host {
         font-size: var(--font-size-normal);
       }
-      gr-change-list-item:not([selected]),
+      gr-change-list-item,
       tr {
-        border-top: 1px solid #ddd;
-      }
-      tbody {
         border-bottom: 1px solid #ddd;
       }
+      tr.topHeader {
+        border: none;
+      }
       th {
         text-align: left;
       }
@@ -37,14 +37,35 @@ limitations under the License.
       .cell:not(.label) {
         padding-right: 8px;
       }
+      th.label {
+        border-left: none;
+      }
       .topHeader,
       .groupHeader {
         font-family: var(--font-family-bold);
       }
-      .topHeader {
+      .topHeader th {
         background-color: #fafafa;
         font-size: var(--font-size-large);
         height: 3rem;
+        position: -webkit-sticky;
+        position: sticky;
+        top: -1px; /* Offset for top borders */
+        z-index: 1;
+      }
+      /* :after pseudoelements are used here because borders on sticky table
+        headers with a background color are broken. */
+      th:after {
+        border-bottom: 1px solid #ddd;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+      th.label:after {
+        border-left: 1px solid #ddd;
+        top: 0;
       }
       .groupHeader {
         background-color: #f4f4f4;
@@ -90,11 +111,12 @@ limitations under the License.
         width: 30px;
       }
       .label {
+        border-left: 1px solid #ddd;
         text-align: center;
         width: 3rem;
       }
-      .label:not(.topHeader) {
-        border-left: 1px solid #ddd;
+      .topHeader .label {
+        border: none;
       }
       .truncatedProject {
         display: none;