UX: Select-kit update alignment fixes (#14199)

app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

@@ -79,10 +79,6 @@
           min-height: unset;
         }
 
-        &:focus {
-          border: 1px solid transparent;
-        }
-
         .d-icon + .d-icon {
           margin-left: 0.25em;
         }

app/assets/stylesheets/common/select-kit/period-chooser.scss

@@ -9,9 +9,9 @@
       }
 
       .period-chooser-header {
+        display: inline-block; // safari 14 has issues with summary elements and flexbox
         background: none;
         border: none;
-        justify-content: flex-start;
         width: auto;
         height: auto;
         padding: 0;
@@ -21,6 +21,11 @@
           display: inline-block;
           box-sizing: border-box;
 
+          // for text + caret alignment
+          line-height: 1;
+          vertical-align: bottom;
+          margin-bottom: 10px;
+
           .date-section {
             color: var(--primary);
             margin-right: 5px;

app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss

@@ -1,6 +1,7 @@
 .select-kit {
   &.dropdown-select-box {
     &.user-notifications-dropdown {
+      display: flex;
       text-align: left;
 
       .d-icon {
@@ -12,8 +13,8 @@
         max-width: 485px;
       }
 
-      .dropdown-select-box-header {
+      .select-kit-header-wrapper {
-        align-items: center;
+        justify-content: center;
       }
     }
   }

app/assets/stylesheets/mobile/user.scss

@@ -244,7 +244,6 @@
         display: flex;
         flex: 1 1 auto;
         flex-wrap: wrap;
-        margin-left: -1em;
         li,
         > span {
           display: flex;
@@ -264,6 +263,10 @@
         }
       }
 
+      > ul {
+        margin-left: -1em; // negates left button margin, for alignment
+      }
+
       .user-profile-controls-outlet {
         margin: 0 0 0 1em;
         li {