diff --git a/core/css/header.scss b/core/css/header.scss index e4a22141b0..e87f5f7815 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -433,7 +433,7 @@ nav[role='navigation'] { li { position: relative; cursor: pointer; - margin: 0 2px; + padding: 0 2px; display: flex; justify-content: center; @@ -446,6 +446,9 @@ nav[role='navigation'] { align-items: center; justify-content: center; opacity: .6; + // Make sure most app names don’t ellipsize + letter-spacing: -0.5px; + font-size: 12px; } /* focused app visual feedback */ @@ -453,19 +456,28 @@ nav[role='navigation'] { a:focus, a.active { opacity: 1; + font-weight: bold; + } + + // Text size back to normal for hover/focus + &:hover a, + a:focus { + font-size: 14px; } &:hover a + span, a:focus + span, &:hover span, &:focus span, - a:focus span { + a:focus span, + a.active span { display: inline-block; text-overflow: initial; width: auto; overflow: hidden; padding: 0 5px; z-index: 2; + margin-bottom: -1px; // for vertical alignment } /* hidden apps menu */ @@ -482,7 +494,7 @@ nav[role='navigation'] { position: absolute; color: var(--color-primary-text); bottom: 2px; - width: calc(100% - 4px); + width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis;