Aligned collapsed header dropdown item styles

Previously the desktop-visible items would style different when collapsed
into the expanded dropdown menu, compared to existing items.

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 457b96b4b1c67ae0a159688e64362ced837b2911..923f026c2663f3f9f09d301b89cb947c3c03188e 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -194,23 +194,29 @@ header .search-box {
     overflow: hidden;
     position: absolute;
     box-shadow: $bs-hover;
-    margin-top: -$-xs;
+    margin-top: $-m;
+    padding: $-xs 0;
     &.show {
       display: block;
     }
   }
   header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
     text-align: start;
-    display: block;
-    padding: $-s $-m;
+    display: grid;
+    align-items: center;
+    padding: 8px $-m;
+    gap: $-m;
     color: $text-dark;
+    grid-template-columns: 16px auto;
+    line-height: 1.4;
     @include lightDark(color, $text-dark, #eee);
     svg {
       margin-inline-end: $-s;
+      width: 16px;
     }
     &:hover {
-      @include lightDark(background-color, #eee, #333);
-      @include lightDark(color, #000, #fff);
+      background-color: var(--color-primary-light);
+      color: var(--color-primary);
       text-decoration: none;
     }
     &:focus {