Merge pull request #4676 from consul/admin_menu_padding

Improve styles for long admin menu items

app/assets/stylesheets/admin/menu.scss

@@ -7,13 +7,20 @@
   ul {
     list-style-type: none;
     margin-bottom: 0;
-    margin-left: 0;
+    margin-#{$global-left}: 0;
     padding: 0;
   }
 
   > ul > li a {
+    display: flex;
     font-weight: bold;
 
+    &::before,
+    &::after {
+      flex: 1em 0 0;
+      margin-top: 0.1em;
+    }
+
     @mixin icon($name, $style) {
       @include has-fa-icon($name, $style);
 
@@ -22,15 +29,6 @@
       }
     }
 
-    [class^="icon-"] {
-      display: inline-block;
-      font-size: rem-calc(20);
-      line-height: $line-height;
-      text-align: center;
-      vertical-align: middle;
-      width: $line-height * 1.5;
-    }
-
     &.booths-link {
       @include icon(archive, solid);
     }
@@ -142,8 +140,7 @@
   li a {
     color: inherit;
     display: block;
-    line-height: $line-height * 2;
-    padding-left: $line-height / 4;
+    padding: $line-height / 2;
     vertical-align: top;
 
     &:hover {
@@ -155,15 +152,13 @@
 
   .is-accordion-submenu-parent {
 
-    > a::after {
-      border: 0;
-      content: "\f078";
-      font-family: "Font Awesome 5 Free";
-      font-weight: bold;
-      height: auto;
-      position: absolute;
-      right: 24px;
-      transition: 0.25s;
+    > a {
+      @include has-fa-icon(chevron-down, solid, after);
+
+      &::after {
+        margin-#{$global-left}: auto;
+        transition: 0.25s;
+      }
     }
   }
 
@@ -181,6 +176,7 @@
 
     a {
       font-weight: normal;
+      margin-#{$global-right}: 0;
     }
 
     .is-active {

app/assets/stylesheets/layout.scss

@@ -460,6 +460,7 @@ button,
     > nav {
       flex: 20%;
       min-width: $side-menu-min-width;
+      max-width: max-content;
 
       + * {
         flex: 80%;

app/assets/stylesheets/mixins/icons.scss

@@ -17,8 +17,7 @@
 
 %admin-menu-icon {
   font-size: rem-calc(20);
-  margin-left: rem-calc(8);
-  margin-right: rem-calc(10);
+  margin-#{$global-right}: rem-calc(10);
 }
 
 $font-awesome-icons: (