Make sure most app names don’t ellipsize, fix #22845, fix #22219

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/core/css/header.scss b/core/css/header.scss
index e4a22141b066b76a985b0601f173a0872f02dfc5..e87f5f78154558723512462efb32741015084d85 100644 (file)
--- 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;