css: Use a proper height for level 1 menu items

nilmerg · nilmerg · commit c2abbb8037dc · 2025-04-30T10:00:25.000+02:00
Helps with aligning the flyout caret next
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
@@ -7,6 +7,7 @@
   }
 }
 
+@nav-item-height: 3.166666667em; // 38px
 @icon-width: 1.7em; // 1.5em width + 0.2em right margin
 
 #menu {
@@ -51,7 +52,6 @@
 }
 
 #menu .nav-level-1 > .nav-item {
-  line-height: 2.167em; // 26 px
   color: @menu-color;
 
   &.active {
@@ -70,6 +70,9 @@
 
   > a {
     padding: 0.5em 0.5em 0.5em .75em;
+    height: @nav-item-height;
+    display: flex;
+    align-items: center;
   }
 
   &.active:not(.selected) > a:focus,
@@ -114,8 +117,8 @@
     content: "";
     display: block;
     height: 1.25em;
-    margin-top: -1.75em;
     width: 1.25em;
+    top: ~"calc(50% - (1.25em / 2))";
   }
 }
 
@@ -150,7 +153,7 @@
     height: 1.25em;
     width: 1.25em;
     position: absolute;
-    top: .5em;
+    top: ~"calc(50% - (1.25em / 2))";
     right: -.75em;
     z-index: 3;
   }
@@ -234,6 +237,8 @@
 // Badge offset correction
 #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
   margin-top: 0.2em;
+  margin-left: auto;
+  order: 1; // It's the only positioned element in the flex container, hence 1 moves it to the right most position
 }
 
 #menu .nav-level-2 > .badge-nav-item > a > .badge {

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
	`10`	`+@nav-item-height: 3.166666667em; // 38px`
`10`	`11`	`@icon-width: 1.7em; // 1.5em width + 0.2em right margin`
`11`	`12`
`12`	`13`	`#menu {`
`@@ -51,7 +52,6 @@`
`51`	`52`	`}`
`52`	`53`
`53`	`54`	`#menu .nav-level-1 > .nav-item {`
`54`		`- line-height: 2.167em; // 26 px`
`55`	`55`	`color: @menu-color;`
`56`	`56`
`57`	`57`	`&.active {`
`@@ -70,6 +70,9 @@`
`70`	`70`
`71`	`71`	`> a {`
`72`	`72`	`padding: 0.5em 0.5em 0.5em .75em;`
	`73`	`+ height: @nav-item-height;`
	`74`	`+ display: flex;`
	`75`	`+ align-items: center;`
`73`	`76`	`}`
`74`	`77`
`75`	`78`	`&.active:not(.selected) > a:focus,`
`@@ -114,8 +117,8 @@`
`114`	`117`	`content: "";`
`115`	`118`	`display: block;`
`116`	`119`	`height: 1.25em;`
`117`		`- margin-top: -1.75em;`
`118`	`120`	`width: 1.25em;`
	`121`	`+ top: ~"calc(50% - (1.25em / 2))";`
`119`	`122`	`}`
`120`	`123`	`}`
`121`	`124`
`@@ -150,7 +153,7 @@`
`150`	`153`	`height: 1.25em;`
`151`	`154`	`width: 1.25em;`
`152`	`155`	`position: absolute;`
`153`		`- top: .5em;`
	`156`	`+ top: ~"calc(50% - (1.25em / 2))";`
`154`	`157`	`right: -.75em;`
`155`	`158`	`z-index: 3;`
`156`	`159`	`}`
`@@ -234,6 +237,8 @@`
`234`	`237`	`// Badge offset correction`
`235`	`238`	`#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {`
`236`	`239`	`margin-top: 0.2em;`
	`240`	`+ margin-left: auto;`
	`241`	`+ order: 1; // It's the only positioned element in the flex container, hence 1 moves it to the right most position`
`237`	`242`	`}`
`238`	`243`
`239`	`244`	`#menu .nav-level-2 > .badge-nav-item > a > .badge {`