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
repeated.
Screenshots: https://imgur.com/a/lUpDd9x
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);
}
