commit 88d26f6718be129f3da04a4606ed179514fd3613
author Kasper Nilsson <kaspern@google.com> Tue Apr 17 13:51:51 2018 +0200
committer Kasper Nilsson <kaspern@google.com> Thu Apr 19 13:45:23 2018 +0000
tree b4436e83c1f8f25b92e10eb98f1b94b75fa06dd7
parent ee33087e12441801fb0ae34815d031b224fe0441

Fix missing top border in dashboard view

Needed to show a border on top of the first gr-change-list-item when a
groupHeader exists. Cannot use + selector because of dom-repeats
existing in the DOM tree.

Change-Id: I77209d90061c1d7f2a7dae3d8c8ee179f1cb47e2

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

diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 3f6399f..847a572 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -28,10 +28,20 @@
       gr-change-list-item:focus {
         background-color: var(--selection-background-color);
       }
+      /* The border-collapse attribute only works on sibling elements, not
+        cousin elements. So, if we want the table to have a sticky header and
+        have borders between each row, we must disable the border-top on the
+        elements directly below a .topHeader. */
       .topHeader ~ gr-change-list-item:first-of-type,
       .topHeader + .groupHeader {
         border-top: none;
       }
+      /* Needed to show a border on top of the first gr-change-list-item when a
+        groupHeader exists. Cannot use + selector because of dom-repeats
+        existing in the DOM tree. */
+      .topHeader ~ .groupHeader ~ gr-change-list-item {
+        border-top: 1px solid var(--border-color);
+      }
       tbody {
         border-bottom: 1px solid var(--border-color);
       }