ux: Add icon to selected option in PageHeader navigation on small screens, update select boxes for Firefox so the arrow to the right is aligned with the other select boxes (#10190)

public/sass/components/_gf-form.scss

@@ -242,12 +242,30 @@ $input-border: 1px solid $input-border-color;
   position: relative;
   background-color: $input-bg;
 
+  .gf-form-select-icon {
+    position: absolute;
+    z-index: 1;
+    left: $input-padding-x;
+    top: 50%;
+    margin-top: -7px;
+
+    & + .gf-form-input {
+      position: relative;
+      z-index: 2;
+      padding-left: $input-padding-x*3;
+      background-color: transparent;
+
+      option { // Firefox
+        color: $black;
+      }
+    }
+  }
+
+
   select.gf-form-input {
     text-indent: .01px;
     text-overflow: '';
-    padding-right: $input-padding-x*4;
-    -webkit-appearance: none;
-    -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
+    padding-right: $input-padding-x*3;
     appearance: none;
 
     &:-moz-focusring {

public/sass/components/_page_header.scss

@@ -70,8 +70,9 @@
   text-transform: uppercase;
 }
 
-.page-header__select_nav {
+.page-header__select-nav {
   margin-bottom: 10px;
+  max-width: 100%;
 
   @include media-breakpoint-up(lg) {
     display: none;