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

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

1 files changed, 15 insertions, 3 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index e4a22141b06..e87f5f78154 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;