Fix overflow of navigation styles

The nav menu contains both, text in <li> and and text in <li><a>. Only
text in <li><a> was overflowing correctly. The fix is to also apply the
overflow styles to <li> directly.

Note that `white-space` is inherited, does not have to be repeated. But
`overflow` and `text-overflow` are not inherited, so they have to be

Release-Notes: skip
Google-Bug-Id: b/266116019
Change-Id: Ib9cac681ebbb4dbe808015b9b237759a02c45c11
diff --git a/polygerrit-ui/app/styles/gr-page-nav-styles.ts b/polygerrit-ui/app/styles/gr-page-nav-styles.ts
index b6e8f60..963b2a2 100644
--- a/polygerrit-ui/app/styles/gr-page-nav-styles.ts
+++ b/polygerrit-ui/app/styles/gr-page-nav-styles.ts
@@ -16,13 +16,16 @@
     border-top: 1px solid transparent;
     display: block;
     padding: 0 var(--spacing-xl);
-  }
-  .navStyles li a {
-    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  .navStyles li a {
+    display: block;
+    /* overflow and text-overflow are not inherited, must repeat them */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .navStyles .subsectionItem {
     padding-left: var(--spacing-xxl);